Vue路由
Vue中的路由:路径和组件的映射关系
路由基本使用
-
下载 VueRouter 模块到当前工程,版本3.6.5 (vue2)
npm i vue-router@3.6.5
-
main.js中引入VueRouter
import VueRouter from 'vue-router'
-
注册插件
App.use(VueRouter)
-
创建路由对象
const router = new VueRouter()
-
注入,将路由对象注入到new Vue实例中,建立关联
// import router from '@/router/index' new Vue({ render: h => h(App), router:router }).$mount('#app')
-
配置路由规则
// 1. vue i vue-router@3.6.5 // 2. import VueRouter import Vue from 'vue' import VueRouter from 'vue-router' import FindMusic from '@/views/FindMusic' import MyMusic from '@/views/MyMusic' import FriendMusic from '@/views/FriendMusic' // 3. vue安装插件 Vue.use(VueRouter) // 4.新建VueRouter对象 const router = new VueRouter({ // 6.配置规则 routes:[ {path:'/find',component:FindMusic}, {path:'/my',component:MyMusic}, {path:'/friend',component:FriendMusic} ] }) export default router
-
配置路由出口 <router-view>
<div> <div class="footer_wrap"> <!-- 配置导航 --> <!-- vue-router 提供了一个全局组件 router-link (取代 a 标签) --> <!-- 1.能跳转,配置 to 属性指定路径(必须) 。本质还是 a 标签 ,to 无需 # --> <!-- 2.能高亮,默认就会提供高亮类名,可以直接设置高亮样式 --> <!-- router-link-active模糊匹配 router-link-exact-active精准匹配--> <router-link to="/find">发现音乐</router-link> <router-link to="/my">我的音乐</router-link> <router-link to="/friend">朋友</router-link> </div> <div class="top"> <!-- 配置路由出口 --> <router-view></router-view> </div> </div>
声明式导航--路由传参
-
查询参数传参
-
动态路由传参
查询参数传参
-
如何传参?
<router-link to="/path?参数名=值"></router-link>
-
如何接受参数
固定用法:$route.query.参数名
动态路由传参
-
配置动态路由
动态路由后面的参数可以随便起名,但要有语义
const router = new VueRouter({ routes: [ ..., { // /search/:words 表示,必须要传参数。如果不传参数,也希望匹配,可以加个可选符"? path: '/search/:words', component: Search } ] })
-
配置导航链接
to="/path/参数值"
-
对应页面组件接受参数
$route.params.参数名
params后面的参数名要和动态路由配置的参数保持一致
查询参数传参 VS 动态路由传参
-
查询参数传参 (比较适合传多个参数)
-
跳转:to="/path?参数名=值&参数名2=值"
-
获取:$route.query.参数名
-
-
动态路由传参 (优雅简洁,传单个参数比较方便)
-
配置动态路由:path: "/path/:参数名"
-
跳转:to="/path/参数值"
-
获取:$route.params.参数名
注意:动态路由也可以传多个参数,但一般只传一个
-
重定向
{ path: 匹配路径, redirect: 重定向到的路径 }, 比如: { path:'/' ,redirect:'/home' }
404
配置在其他路由规则的最后面\
path: "*" (任意路径) – 前面不匹配就命中最后这个
import NotFind from '@/views/NotFind'
const router = new VueRouter({
routes: [
...
{ path: '*', component: NotFind } //最后一个
]
})
编程式导航--两种路由跳转
编程式导航:用JS代码来进行跳转
两种语法:
-
path 路径跳转 (简易方便)
-
name 命名路由跳转 (适合 path 路径长的场景)
path路径跳转
特点:简易方便
//简单写法
this.$router.push('路由路径')
//完整写法
this.$router.push({
path: '路由路径'
})
传参:
-
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 命名路由跳转
特点:适合 path 路径长的场景
-
路由规则,必须配置name配置项
{ name: '路由名', path: '/path/xxx', component: XXX },
-
通过name来进行跳转
this.$router.push({ name: '路由名' })
传参:
-
query传参
this.$router.push({
name: '路由名字',
query: {
参数名1: '参数值1',
参数名2: '参数值2'
}
})
-
动态路由传参
this.$router.push({
name: '路由名字',
params: {
参数名: '参数值',
}
})