vue-router

<router-link to="/user">User</router-link>

 

路由中必须包含path,component

path 表示当前路由规则匹配的 hash 地址(router-link中to的属性值)
component 表示当前路由规则对应要展示的组件，只接受组件对象，不接收字符串

routes:[
    { path:'/user', component: User }
]

路由重定向

指用户在访问地址 A 的时候，强制用户跳转到 C ，从而展示特定的页面

通过路由规则的 redirect 属性，指定一个新的路由地址

routes:[
    { path:'/', redirect:'/user' }      /重定向到/user
    { path:'/user', component: User }
]

嵌套路由

父级路由通过children属性配置子级路由

routes:[
    { path:'/user', component: User }
    {
    path:'/register', 
    component: Register，
    //通过 children 属性，为 /register 添加子路由规则，children是数组
    children: [
        { path:'/register/tab1', component: Tab1 }
        { path:'/register/tab2', component: Tab2 }
    ]
    }
]

动态路由匹配

通过动态路由参数的模式进行路由匹配

routes:[
    { path:'/user/:id', component: User }
]

$route.params.id可以获取到路由中的id

路由组件传递参数

$router不够灵活，可以使用props传参的形式将组件和路由中的参数进行关联

1.props的值为布尔类型

路由规则
routes:[
    { path:'/user/:id', component: User, props: true }
]

页面中，script中定义props，html中使用
const User = {
    props: ['id'],    //使用 props 接收路由参数
    template: '<div>用户ID：{{id}}</div>'     //使用路由参数
}

2.props的值为对象类型

路由规则
routes:[
    { path:'/user/:id', component: User, props: { uname: 'lisi', age: 12 } }
]

页面中，id没有传过来
const User = {
    props: ['uname','age'],    //使用 props 接收路由参数
    template: '<div>用户信息：{{uname}}+{{age}}</div>'     //使用路由参数
}

3.props的值为函数类型

路由规则，id通过params传过去
routes:[
    { 
    path:'/user/:id', 
    component: User, 
    props: route=> ({ uname: 'lisi', age: 12, id: route.params.id }) 
    }
]

页面中
const User = {
    props: ['uname','age', 'id'],    //使用 props 接收路由参数
    template: '<div>用户信息：{{uname + '---' + age + '---' + id}}</div>'     //使用路由参数
}

命名路由

为更加方便的表示路由的路径，可以给路由规则起一个别名(name)，即‘命名路由’

routes:[
    {
      path:'/user/:id', 
      name: 'user',
      component: User 
    }
]

跳转到 name为user 所指定的路由规则中，params 传递参数(参数名要跟路由规则中一致)

声明式导航
<router-link :to="{ name: 'user', params: { id:123 } }">User</router-link>
编程式导航
router.push({ name: 'user', params:{ id: 123 } })

编程式导航

声明式导航：通过 点击链接 实现导航的方式。先声明标签后实现导航

例如： 普通网页中的a标签 vue中的router-link

编程式导航：通过 调用js 形式的API实现导航的方式。

例如：普通网页中的 location.href

常用的编程时导航API：
this.$router.push('hsah地址')
this.$router.go(n)    //前进后退 n=1历史记录中前进一步，n=-1历史记录中后退一步

router.push()方法的参数规则

//字符串(路径名称)
router.push('home')

//对象
router.push({ path: '/home' })

//命名的路由(传递参数)
router.push({ name: 'home', params: { id: 123 } })　　　　获取参数：this.$route.params.shopid

//带查询参数，变成 /register?uname=lisi
router.push({ path: '/register', query: { uname: 'lisi' } })

 

 

码云小案例：

demo:https://gitee.com/xhxdd/vue-router