Vue学习六：路由进阶

一、路由的封装抽离

目标：将路由模块抽离出来。好处：拆分模块，易于维护。

第一步：在src目录下新建一个router目录，在创建一个index.js文件，将先前main.js中的路由代码转移到index.js文件中。（这里需要使用到vue所以需将vue包导入；需修改组件路径，@符号代表绝对路径src；需将路由实例导出）index.js文件如下

import Find from '@/views/Find'
import My from '@/views/My'
import Friend from '@/views/Friend'

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
    routes:[
        {path:'/find',component:Find},
        {path:'/my',component:My},
        {path:'/friend',component:Friend},
    ]
})
export default router

声明式导航（router-link）-导航链接

需求:实现导航高亮效果
vue-router提供了一个全局组件router-link (取代a标签)
①能跳转，配置to属性指定路径(必须)。本质还是a标签，to无需# .
②能高亮，默认就会提供高亮类名，可以直接设置高亮样式

<div class="musicHeader">
    <a href="#/find">发现音乐</a>
    <a href="#/my">我的音乐</a>
    <a href="#/friend">朋友</a>
</div>
<div class="musicMain">
    <router-view></router-view>
</div>

<div class="musicHeader">
    <router-link to="/find">发现音乐</router-link>
    <router-link to="/my">我的音乐</router-link>
    <router-link to="/friend">朋友</router-link>
</div>
<div class="musicMain">
    <router-view></router-view>
</div>

router-link会自动给当前导航添加两个类名，router-link-active模糊匹配(用的多)，router-link-exact-active精确匹配
声明式导航（router-link）-跳转传参
目标：在跳转路由时，进行传值

1、查询参数传参

①语法格式如下
●to="/path?参数名=值"
②对应页面组件接收传递过来的值
●$route.query.参数名

//发送
<router-link to="/find?findMusic='精品音乐'">发现音乐</router-link>
//组件模板接受
{{$route.query.findMusic}}
//组件函数接受，在created里面接受，需要加上this
created(){
    console.log(this.$route.query.findMusic)
}

2、动态路由传参（需要配置，restful风格，接受方式和查询参数不同）

①配置动态路由

const router = new VueRouter({
    routes:[
        {path:'/find/:words',component:Find},
        {path:'/my/:words',component:My},
        {path:'/friend/:words',component:Friend},
    ]
})

②配置导航链接
●to="/ path/参数值"
③对应页面组件接收传递过来的值
$route.params.参数名

动态路由参数可选符: /search/:words 表示，必须要传参数。如果不传参数，也希望匹配，可以加个可选符"?"

Vue路由-重定向

问题:网页打开，url 默认是/路径，未匹配到组件时，会出现空白
说明:重定向→匹配path后,强制跳转path路径
语法: { path:匹配路径, redirect:重定向到的路径},

{path:'/',redirect:'/my'},

Vue路由- 404
作用:当路径找不到匹配时，给个提示页面
位置:配在路由最后
语法: path:"*"(任意路径) -前面不匹配就命中最后这个

{path:'*',component:NotFind}

编程式导航（用JS代码来跳转）

两种语法:
①path路径跳转

②name命名路由跳转(适合path路径长的场景)

编程式导航-路由传参
两种传参方式:查询参数+动态路由传参
两种跳转方式，对于两种传参方式都支持: .
①path路径跳转传参(query传参)

//query传参
this.$router.push('/路径?参数名1=参数值1&参数名2=参数值2')
this.$router.push({
    path:'/路径',
    query:{
        参数名1:'参数值1',
        参数名2:'参数值2',
    }
})
//动态路由传参
this.$router.push('/路径/参数值')
this.$router.push({
    path:'/路径/参数值'
})

②name命名路由跳转传参

//query传参
this.$router.push({
    name:'路由名',
    query:{
        参数名1:'参数值1',
        参数名2:'参数值2',
    }
})
//动态路由传参
this.$router.push({
    name:'路由名',
    params:{
        参数名1:'参数值1',
        参数名2:'参数值2',
    }
})