【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({ name: 'user', query: { userId: 123 }}) // 命名的路由这里会变成 /user?userId=123

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

　　　　⑥ this.$router.push({ path: 'register', params: { plan: 'private' }})//报错

　　ps:由于动态路由也是传递params的，所以在 this.$router.push() 方法中path不能和params一起使用，否则params将无效。

　　需要用name来指定页面。及通过路由配置的name属性访问

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.username; // 链接里的name被封装进了 this.$route.params

3.检测路由　

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

或者

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

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

4.route属性

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

注意：$route.matched属性，它是一个包含性的匹配，它会将嵌套它的父路由都匹配出来。

　　例如，/home/news/detail/:id这条路径，它包含3条匹配的路由：

/home/news/detail/:id
/home/news
/home

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

8.this.$router.resolve实现页面跳转并传参并在新窗口打开

let lybl = '';
 
lybl = this.$router.resolve(
    {
        path: 'EnterpriseReport',
        query:{
        ancheid: id , ancheyear: ancheyear
    }})
 
window.open(lybl.href, '_blank')

9.既有params 参数，又有query参数

let options= {
　　name: "XXX",
　　params: {
　　　　id: 1,
　　},
　　query: {
　　　　from: 1
　　},
}
this.$router.push(options)

10、route和router的区别

router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history对象。经常用的跳转链接就可以用this.$router.push，和router-link跳转一样。

route相当于当前正在跳转的路由对象。每一个路由都会有一个router对象，可以从里面获取name,path,params等。