[Vue]路由

Vue路由

Vue中的路由：路径和组件的映射关系

路由基本使用

1. 下载 VueRouter 模块到当前工程，版本3.6.5 (vue2)

   npm i vue-router@3.6.5
   

2. main.js中引入VueRouter

   import VueRouter from 'vue-router'
   

3. 注册插件

   App.use(VueRouter)
   

4. 创建路由对象

   const router = new VueRouter()
   

5. 注入，将路由对象注入到new Vue实例中，建立关联

   // import router from '@/router/index'
   new Vue({
     render: h => h(App),
     router:router
   }).$mount('#app')
   

6. 配置路由规则

   // 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
   

7. 配置路由出口 <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 动态路由传参

1. 查询参数传参 (比较适合传多个参数)

   1. 跳转：to="/path?参数名=值&参数名2=值"

   2. 获取：$route.query.参数名

2. 动态路由传参 (优雅简洁，传单个参数比较方便)

   1. 配置动态路由：path: "/path/:参数名"

   2. 跳转：to="/path/参数值"

   3. 获取：$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: {
    参数名: '参数值',
  }
})