学习路由器vue-router

2024年2月3日 233次阅读 来源: someone

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>
    原文作者：someone
    原文地址: https://segmentfault.com/a/1190000016784786
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞