vue 路由介绍新手入门到高级篇-路由跳转的几种形式,以及路由守卫
路由的基本跳转的几种方法
路由配置的js:
如下:
export default new Router({
// mode: 'history',
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
},
{
path:'/hao',
name:'hao',
component: Hao,
}
]
})
写在router-link上的有:
<router-link to="hao">点我跳到hao组件</router-link>
// 没传参
<router-link :to="{name:hao}">点我跳到hao组件</router-link>
//params传参
<router-link :to="{name:hao,params:{id:1}}">点我跳到hao组件</router-link>
<router-link :to="{path:hao,params:{id:1}}">点我跳到hao组件</router-link>
//接收传的该参数,只需要用
this.$route.params.id
//juery传参
<router-link :to="{name:hao,juery:{id:1}}">点我跳到hao组件</router-link>
<router-link :to="{path:hao,juery:{id:1}}">点我跳到hao组件</router-link>
//接收传的该参数,只需要用
this.$route.juery.id //此时地址栏为为127.0.0.1:3000/#/hao?id=1
写在事件上的有:
this.$router.push('hao')
this.$router.push({path:'hao'})
this.$router.push({name: hao})
//params传参
this.$router.push({name: hao, params: {id: 1})
this.$router.push({path: hao, params: {id: 1})
//juery传参
this.$router.push({name: hao, juery: {id: 1})
this.$router.push({path: hao, juery: {id: 1})
子路由的使用
路由配置的js:
如下:
export default new Router({
// mode: 'history',
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
},
{
path:'/hao',
name:'hao',
component: Hao,
children: [
{
path: 'hen',
name:'hen',
component: Hen
}
]
}
]
})
由于hen是hao的子路由,只需要在hao的template模板标签下面添加<router-view />标签,
点击即可显示hen组件里面的内容
路由通配符 *
作用一:
用于用户访问了没有配置的路由,显示的404组件。
路由守卫介绍及其用法
https://router.vuejs.org/zh/guide/advanced/navigation-guards.html