(共566篇)
全部分类

vue-router2中如何设置默认的路由
[ Vue(2+3) ] 

angularJs 中有一个设置默认路由的方法,那么 vue-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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      name: ',
      path: ',
      redirect: '/home/list'
    },
    {
      name: 'home',
      path: '/home',
      component: Home,
      children: [
        {
          path: 'list',
          component: HomeList
        },
        {
          path: 'article',
          component: HomeArticle
        },
        {
          path: 'login',
          component: HomeLogin
        },
        {
          path: 'register',
          component: HomeRegister
        }
      ]
    },
    {
      name: 'admin',
      path: '/admin',
      component: Admin,
      children: [
        {
          path: 'list',
          component: AdminList
        },
        {
          path: 'article',
          component: AdminArticle
        },
        {
          path: 'user',
          component: AdminUser
        },
        {
          path: 'info',
          component: AdminInfo
        },
        {
          path: 'label',
          component: AdminLabel
        }
      ]
    }
  ]
})

可以看到我们设置了一个 name 和 path 均为空字符串的路由,当浏览器第一次打开的时候 url 为http://localhost:8080/#/,通过我们设置的redirect属性,让他默认跳转到我们的/home/list页面即可,注意 - 后面当我们想要跳转到首页的时候,router-link中的to属性要接到 path 的最尾端,比如

1
<view-link :to=&{path: '/home/list'}></router-link>

否则他是不会自动渲染到二级路由的