学习路由器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



&lt;router-view name="a"&gt;&lt;/router-view&gt;

//路由

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

             }

        ]

   }]



&lt;router-link path="/pageA"&gt;goto pageA &lt;/router-link&gt;

&lt;router-link path="/pageB"&gt;goto pageB &lt;/router-link&gt;

&lt;router-view&gt;&lt;/router-view&gt;

原文地址：https://segmentfault.com/a/1190000016784786

巴特西

学习路由器vue-router

安装及创建router对象

使用router及传参

导航守卫

最新文章

热门文章