浅谈vue-router

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

vue-router，用vue框架开发必备的页面跳转传参机制，主要有声明式和编程式两种

声明式	编程式
<router-link :to="...">	this.router.push(...)
<router-link :to="..." replace>	this.router.replace(...)

一、先来简单说下vue-router的用法

1. 用vu-cli建立的项目，如果没选择这一项，需要手动安装
   npm install vue-router --save
2. 在main.js文件里导入并且进行全局注册

    import VueRouter from  'vue-router'  
    Vue.use(VueRouter)

3. 创建路由器对象，添加路由配置文件，建一个router.js文件，里面配置上所有的组件和路由信息

    import Vue from 'vue'  
    import VueRouter from 'vue-router'  
    Vue.use(VueRouter)  
    const routes = [  
        { 
            path: '/myhome', 
            name: 'home',
            component: resolve => require(['@/views/homePage/home'], resolve)
         }
    ];
    export default new Router({ routes, mode: 'history' })

二、页面传参跳转的几种方式

1. 直接拼写字符串路径 router.push('/home')

2. 传递json对象,下面这两种是最常见的两种方式，但是有两个小坑需要注意下：

   **query传递参数没有那么多的限制，用name和path都可以的
   **params配合path传递参数，就会发现接收不到参数
   **query传递的参数会在地址栏上显示，而params传递的参数刷新就没有了，不过为了解决这个弊端，可以把参数存起来，这样就可以解决刷新的问题

    router.push({path:'home',query:{id:'000'})
    router.push({name:'myhome',params:{id:'000'})

三、路由配置文件可以添加的参数

• 1. name：对应的参数的模块名称
• 2. path：浏览器上显示的访问地址
• 3. component：对应的需要渲染的组件页面
• 4. alias：路由别名
• 5. redirect：可以定义重定向的地址
• 6. meta：可以配置一些自定义属性，比如title,是否需要登录等
• 6. children：嵌套子路由的配置，是个数组，每一项可配置的参数和外层是一致的 这里只是列举出我开发中常用的一些属性。
     有写的不好的地方欢迎大家指正。