4. router

4.1. router 基本使用

router是完成前端路由的。基本使用如下。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import About from '@/components/About'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect: "/home"
    },
    {
      path: '/home',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ],
  mode: 'history'
})

4.2. 完成跳转

可以在组件内的一些方法中完成一些调整。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<template>
  <div id="app">

    <router-link to="/home" tag="button"  >home</router-link>
    <router-link to="/about" tag="button"  >about</router-link>
    <button @click="aboutClick">about2</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods:{
    aboutClick(){
      this.$router.push("/about")
     // history.pushState("about")
    },
  }
}
</script>

<style>
.router-link-active{
  color: red;
}
</style>

4.3. 动态路由

router是完成前端路由的。基本使用如下。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import About from '@/components/About'
import User from '@/components/User'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect: "/home"
    },
    {
      path: '/home',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    },
    // {
    //   path: '/user',
    //   name: 'user',
    //   component: User
    // },
    {
      path: '/user/:uid',
      name: 'user',
      component: User
    }
  ],
  mode: 'history'
})

4.4. 懒加载

router是完成前端路由的。基本使用如下。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import Vue from 'vue'
import Router from 'vue-router'
// import Home from '@/components/Home'
// import About from '@/components/About'


const Home = () => import ('@/components/Home')
const About = () => import ('@/components/About')

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect: "/home"
    },
    {
      path: '/home',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ],
  mode: 'history'
})

4.5. 嵌套路由

router是完成前端路由的。基本使用如下。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import Vue from 'vue'
import Router from 'vue-router'
// import Home from '@/components/Home'
// import About from '@/components/About'

const Home = () => import ('@/components/Home')
const About = () => import ('@/components/About')

const HomeNews = () => import ('@/components/HomeNews')
const HomeMessages = () => import ('@/components/HomeMessages')

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '',
      redirect: "/home",

    },
    {
      path: '/home',
      name: 'home',
      component: Home,
      children:[
        {
          path: '',
          redirect: "news",
        },
        {
          path: 'news',
          component: HomeNews
        },
        {
          path: 'messages',
          component: HomeMessages
        }
      ],
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ],
  mode: 'history'
})

4.6. 参数传递

router是完成前端路由的。基本使用如下。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<template>
<div>
  <h2>我是Profile</h2>
  <p>我是Profile内容</p>
  <p>第一种方式获取传递过来的uid为： {{Uid}}</p>
  <p>第二种方式获取传递过来的uid为： {{Uid2}}</p>

</div>
</template>

<script>
export default {
name: "Profile",
  computed:{
    Uid(){
      return this.$route.params.uid
    },
    Uid2(){
      return this.$route.query.uid
    }
  }
}
</script>

<style scoped>

</style>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<template>
  <div id="app">

    <router-link to="/home">home</router-link>
    <router-link to="/about">about</router-link>
    <router-link :to="UidUri">user</router-link>
    <router-link :to="{path: '/profile', query:{uid: 'panda2'}}">Profile</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      uid: 'panda'
    }
  },
  computed: {
    UidUri() {
      return "/user/" + this.uid

    }
  }
}
</script>

<style>

</style>