【vue】vue-router的用法

依赖安装：(c)npm install vue-router

过程：

import Vue from \'vue\';

import Router from \'vue-router\';

Vue.use(Router)

使用new Router()定义一个路由，并export

在main.js中import该路由，将定义个的这个路由挂载到vue的根实例中

然后可以使用<router-link :to="/***"></router-link>跳转页面

常用方法：

1.页面跳转方式：

　　htm中使用的方式：

　　　　①不带参数写法：

　　　　　　<router-link to="home">点我</router-link>

　　　　　　<router-link v-bind:to="\'home\'">点我</router-link>

　　　　　　<router-link :to="\'home\'">Home</router-link>

　　　　　　<router-link :to="{ path: \'home\' }">Home</router-link>

　　　　② 带参数写法：

　　　　　A：　<router-link :to="{ name: \'user\', params: { userId: 123 }}">User</router-link>

　　　　　　批注：路由配置格式：

　　　　　　　　{ path: \'/user/:userId\', name: \'user\', component: User }

　　　　　　　导航显示：/user/123 　

　　　　　B:　<router-link :to="{ path: \'register\', query: { plan: \'private\' }}">Register</router-link>

　　　　　　　　批注：带查询参数

　　　　　　　　　　　导航显示：/register?plan=private

　　js中使用的方式：

　　　　① this.$router.push(\'xxx\') //字符串,这里的字符串是路径path匹配噢，不是router配置里的name

　　　　② this.$router.push({ path: \'home\' }) //对象

　　　　③ this.$router.push({ name: \'user\', params: { userId: 123 }}) // 命名的路由这里会变成 /user/123

　　　　④ this.$router.push({ path: \'register\', query: { plan: \'private\' }}) // 带查询参数，变成 /register?plan=private

2.获取路由相关参数：

　　① ‘http://localhost:8080/linkParamsQuestion?age=18’

　　　　let age = this.$route.query.age; //问号后面参数会被封装进 this.$route.query;

　　② \'http://localhost:8080/linkParamsQuestion/user/evan/post/123’

　　　　注：user/:username/post/:post_id（这种配置方式）

　　　　let name = this.$route.params.name; // 链接里的name被封装进了 this.$route.params

3.检测路由　

　　watch:{
　　　　\'$route\': function (to,from) {
　　　　　　// 对路由变化作出响应...
　　　　}
　　}

或者

watch: {
    "$route": "routeChange",
},

methods: {
    routeChange(){
        console.log(this.$route.path);
    }
    
}

4.router属性

属性	说明
$route.path	当前路由对象的路径，如\'/view/a\'
$rotue.params	关于动态片段（如/user/`:username`)的键值对信息,如{username: \'paolino\'}
$route.query	请求参数，如`/foo?user=1`获取到query.user = 1
$route.router	所属路由器以及所属组件信息
$route.matched	数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
$route.name	当前路径名字

5.在 router-view上加上一个唯一的key，来保证路由切换时都会重新渲染触发钩子了

<router-view :key="key"></router-view>

computed: {
    key() {
        return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
    }
 }

6.路由元信息meta字段

未完待续。。。。

7.非必传参数路由配置

应用：

this.$router.push({ path: \'member\', query: { type: 1 }})

错误配置：

{
    path: \'member/:type\',
    hidden: false,
    component: resolve => require([\'@/views/modules/main/delMan.vue\'], resolve),//懒加载,
    name: \'tag/index/member\',
    meta: { _menuName: \'删除\'}
},

效果：http://v.study.com/#/error/404?type=1

正确配置：

{
    path: \'member\',
    hidden: false,
    component: resolve => require([\'@/views/modules/main/delMan.vue\'], resolve),//懒加载,
    name: \'tag/index/member\',
    meta: { _menuName: \'删除\'}
},

效果

http://v.study.com/#/test/member?type=1

　　　　 https://router.vuejs.org/zh-cn/essentials/getting-started.html

　　　　　https://www.cnblogs.com/Leo_wl/p/5702350.html　

　　　　https://router.vuejs.org/zh-cn/essentials/nested-routes.html　　　　

作者：smile.轉角

QQ：493177502