学习路由器vue-router
vue-router:vue官方路由管理器。
功能:
嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式,在 IE9 中自动降级
自定义的滚动条行为
安装及创建router对象
安装 npm i vue-router
1.创建单条路由
let index = {path:/index,name:'index',component:映射index的组件}
2.将多条路由合并为一组
let routes = [
index,
页面2,
页面3
]
3创建路由对象
const router = new VueRouter({routes})
4在根实例上引用
new Vue({
router
}).$mount(root)
使用router及传参
1、以params作为参数传递
创建路由
const pageA = {
path:'/pageA/:id', //id是动态传递的参数
name:'contentA', //与router-link中to属性的name对应
component:pageA //pageA的组件
}
跳转路由的链接
<router-link :to="{name:'contentA',params:{id:1,name:'pageA'}}">
Go to PageA
</router-link>
或者传path属性
<router-link :to="{path:/learnRouter/contentA/${id}
}">
Go to PageA
</router-link>
页面跳转成功后浏览器url为显示为 /pageA/id
this.$route.params.id来获取
2.以query作为参数传递
const pageA = {
path:'/pageA, //以query作为参数传不需要在path后面加动态属性
name:'contentA', //与router-link中to属性的name对应
component:pageA //pageA的组件
}
跳转路由的组件
<router-link :to="{name:'contentB',query:{id:2}}">
Go to PageA
</router-link>
浏览器url上显示为/pageA?id=1
this.$route.query.id获取
在任何组件中都可以通过this.$router 获得路由对象,this.$route访问的当前路由
导航守卫
全局导航守卫,页面每一次跳转都可以监听,也可以放到组件中单独使用
router.beforeRouteUpdate (to, from, next) {
// to 来自哪里
// from 前往哪里
//next() 来resolve这个钩子的方法,如果不调用就不会完成跳转
//next('/other') 跳到另外一个页面
//next(false) 终止跳转
}
视图
router-link跳转的组件需要加上视图router-view才能显示,
当一个页面有多个视图时用name来区分
视图命名,路由里的component里的name为键名对应router-view name=a
<router-view name="a"></router-view>
//路由
const pageA = {
path:'/pageA',
components:{
a:pageA.vue
}
//这条路由的意思是跳转到/pageA时显示name为a的视图,name=a的视图对应的组件也就是pageA.vue
嵌套路由
例如需要一个tab导航栏,单击菜单时切换组件,但是导航菜单不变。
const route = [
{
path:'/index',
name:'index',
//这里定义子路由
children:[
{
path:'/index/pageA',
name:'pageA',
component:pageA
},
{
path:'/index/pageB',
name:'pageB',
component:pageB
}
]
}]
<router-link path="/pageA">goto pageA </router-link>
<router-link path="/pageB">goto pageB </router-link>
<router-view></router-view>