【Vue-路由】学习笔记

<<回到导览

路由

1.单页应用和多页面

单页应用程序：指所有的功能都在一个html页面上实现

应用场景：

• 单页应用类网站：系统类网站 / 内部网站 / 文档类网站 / 移动端站点
• 多页应用类网站：公司官网 / 电商类网站

2.路由基本使用

2.1.路由的含义

• 单页面应用程序，开发效率高，性能好，用户体验好，最大的原因是页面按需更新

• 按需更新，首先就需要明确访问路径和 组件的对应关系，这依赖于路由

  路由	含义
  生活中的路由	设备和ip的映射关系
  Vue中的路由	访问路径和组件的映射关系

2.2.VueRouter插件

作用：修改地址栏路径时，切换显示匹配的组件

官网：https://v3.router.vuejs.org/zh/

安装：

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

   yarn add vue-router@3.6.5
   

2. main.js中引入VueRouter

   import VueRouter from 'vue-router'
   

3. main.js中安装注册

   Vue.use(VueRouter)const 
   

4. main.js中创建路由对象

   const router = new VueRouter()
   

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

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

   • 当我们配置完以上5步之后 就可以看到浏览器地址栏中的路由 变成了 /#/的形式。表示项目的路由已经被Vue-Router管理。
     

   • 我们打印this.$router，可以看见router对象

     mounted() {
         console.log(this.$router);
     },
     

2.3.配置路由规则和导航

1. 在src文件夹下创建view文件夹，用于存放页面组件

2. 在view文件夹，创建页面组件
   

3. 在这些路由组件中添加组件名（导出组件）

   // 以页面组件DemoMy为例
   export default {
     name: "DemoMy",
   };
   

4. 在main.js配置路由

   // 3.创建路由对象
   // 配置路由
   const router = new VueRouter({
     routes: [
       { path: "/home", component: DemoHome },
       { path: "/my", component: DemoMy },
       { path: "/friend", component: DemoFriend },
     ],
   });
   

5. 在main.导入页面组件

   // 导入路由页面
   import DemoHome from "./view/DemoHome";
   import DemoFriend from "./view/DemoFriend";
   import DemoMy from "./view/DemoMy";
   

6. 配置导航（App.vue），配置路由出口(路径匹配的组件显示的位置)

   <div id="app">
       <div class="header">
         <a href="#/home">主页</a>
         <a href="#/my">我的</a>
         <a href="#/friend">朋友</a>
       </div>
       <div class="top">
         <router-view></router-view>
       </div>
    </div>
   

2.4.组件目录存放

文件夹	组件类型	作用
src/views文件夹	页面组件	页面展示 - 配合路由用
src/components文件夹	复用组件	展示数据 - 常用于复用

2.5.路由模块封装

为了利于维护，将路由模块抽离出来，存放与单独的文件夹。

1. 在文件夹src中创建路由文件index.js
2. 将vue的导入代码复制到index.js
3. 将引入VueRouter、导入路由页面、注册安装VueRouter、创建路由对象剪切到index.js
4. 在index.js文件中导出router，在main.js导入index.js
5. 最后，两个文件的参考代码为

• main.js

  import Vue from 'vue'
  import App from './App.vue'
  import router from '../src/router/index'
  
  Vue.config.productionTip = false
  
  new Vue({
    // 注入vue实例
    router,
    render: h => h(App),
  }).$mount('#app')
  
  

• index.js

  // vue的导入代码
  import Vue from 'vue'
  // 1.引入VueRouter
  import VueRouter from 'vue-router'
  // 导入路由页面
  import DemoHome from "../view/DemoHome.vue";
  import DemoFriend from "../view/DemoFriend.vue";
  import DemoMy from "../view/DemoMy.vue";
  
  // 2.注册安装VueRouter
  Vue.use(VueRouter)
  
  // 3.创建路由对象
  // 配置路由
  const router = new VueRouter({
      routes: [
          { path: "/home", component: DemoHome },
          { path: "/my", component: DemoMy },
          { path: "/friend", component: DemoFriend },
      ],
  });
  
  // 导出
  export default router
  

  当点击不同的a标签，路由发生相应变化则配置成功

  路径简写：脚手架环境下，@指代src目录，可以用于快速引入组件

3.rounter

3.1.router-link实现高亮

vue-router 提供了一个全局组件 router-link (取代 a 标签)

 <div>
    <div class="footer_wrap">
      <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>
    </daiv>
</div>

• router-link自带高亮，但是我们也可以自己设置高亮样式

• 从浏览器检查，我们可以看出， router-link会被解析成a标签

• 这个a标签默认加 router-link-exact-active和router-link-active两个类名

• 我们可以给任意一个class属性添加高亮样式即可实现功能

  类名	匹配方式	作用（以/my为例）
  router-link-exact-active	模糊匹配（用的多）	匹配以/my开头的路径
  router-link-active	精确匹配	仅可以匹配 /my

• 在css部分为这两个类名添加高亮样式即可

3.2.自定义匹配类名

如果嫌弃router-link的两个高亮类名太长，我们可以自定义匹配类名

• 我们可以在创建路由对象时，额外配置两个配置项linkActiveClass和linkExactActiveClass即可

  //  创建路由对象
  const router = new VueRouter({
      // 配置路由 
      routes: [
          {path:'/find',component:Find},
          {path:'/my',component:My},
          {path:'/friend',component:Friend}
      ],
      // 自定义匹配类名       
      linkActiveClass: "active",
      linkExactActiveClass: "exact-active"
  })
  

3.3.声明式导航

在跳转路由时，有时会有进行传参的需求

3.3.1.查询参数传参

• 传参(eg:搜索页)

  <router-link to="/path?参数名=值"></router-link>
  

• 接收(eg:详情页)

  在标签中渲染：：$route.query.参数名

  在js中使用： this.$route.query.参数名

3.3.2.动态路由传参

可以将参数名固定，动态传入参数值，这就是动态路由传参

1. 配置动态路由：在路由后添加:参数名

   const router = new VueRouter({
   	routes: [
           // 给find页面配置动态路由
           {path:'/find/:words',component:Find},
           {path:'/my',component:My},
           {path:'/friend',component:Friend}
       ],
   })
   

2. 传入动态参数值

   <!--  给find页面传入动态参数值 -->
   <router-link to="/find/参数值"></router-link>
   

3. 接收(eg:详情页)

   在标签中渲染：：$route.params.参数名

   在js中使用： this.$route.params.参数名

4. 注意：

   • 动态路由传参时，地址栏不会出现参数名

3.3.3.总结

传参方式	使用场景	配置动态路由	跳转	获取
查询参数传参	多个参数	无	to=“/path?参数名=值&参数名2=值”	$route.query.参数名
动态路由传参	一个参数	/path/:参数名	to=“/path/参数值”	$route.params.参数名

3.4.编程式导航

• 声明式导航因为 router-link有to属性，配合路由配置，可以达到跳转的目的
• 但是其他元素（例如button,div等）如果也有跳转的需求就需要使用到编程式导航

3.4.1.path路径跳转

//简单写法
this.$router.push('路由路径')

//完整写法
this.$router.push({
  path: '路由路径'
})

3.4.2.name命名跳转

1. 为路由配置路由名

   { name: '路由名', path: '/path/xxx', component: xxx },
   

2. 通过name来进行跳转

   this.$router.push({
     name: '路由名'
   })
   

3.4.3.查询参数传参

//简单写法
this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')
//完整写法
this.$router.push({
  path: '/路径',
  query: {
    参数名1: '参数值1',
    参数名2: '参数值2'
  }
})

3.4.4.动态路由传参

//简单写法
this.$router.push('/路径/参数值')
//完整写法
this.$router.push({
  path: '/路径/参数值'
})

注意：动态路由传参在路由配置时，已经将参数名配置

3.4.5.总结

1. 两种跳转方式

   跳转方式	区别	配置项	优点
   路径跳转	写完整路径	path	简易方便
   命名跳转	路由配置时命名	name	适合长路径

2. 两种传参方式

   传参方式	使用场景	不同	获取
   查询参数传参	多个参数	路由配置时，配置参数名	$route.query.参数名
   动态路由传参	一个参数	可以不配置跳转的路由，直接跳转	$route.params.参数名

注意：

• 编程式导航不能跳转到当前所在页面

• 在同一个路由下尽量使用同一套跳转和传参方式，否则会出现

  • 路由分裂（传同样的参数，进入两个不同的路由页面）
  • router-link不匹配（编程式导航跳转，相应的router-link不高亮）的情况

3.5.路由重定向

3.5.1.不传参数

配置了动态路由传参/search/:words ，但是不传参数，则会显示空白

这时，如果我们希望不传参数，也可以匹配，可以加个可选符?

示例：

const router = new VueRouter({
  routes: [
 	...
    { path: '/search/:words?', component: Search }
  ]
})

3.5.2.重定向跳转

• 网页打开时， url 默认是 / 路径，未匹配到组件时，会出现空白

• 我们可以通过重定向，匹配 / 后, 强制跳转 /home 路径

• 语法：

  { path: 匹配路径, redirect: 重定向到的路径 },
  

• 示例：

  // 匹配 / 后, 强制跳转 /home 路径
  { path:'/' ,redirect:'/home' }
  

3.5.3.错误传参

当传参错误，路径找不到匹配时，可以给个提示页面

• 字符 * ，前面路径不匹配，就命中最后这个（一般都配置在最后面）

• 示例：

  const router = new VueRouter({
    routes: [
      ...
      { path: '*', component: NotFind } //最后一个
    ]
  })
  

  1. NotFind组件提示

  <template>
    <div>
      <h1>404 Not Found</h1>
    </div>
  </template>
  

  2. 导入页面

  import NoFind from "@/view/NotFound404"
  

3.5.4.路由模式设置

路由的路径看起来不自然, 有#，我们将其切成真正路径形式

hash路由(默认) 例如: http://localhost:8080/#/home

history路由(常用) 例如: http://localhost:8080/home

示例：

const router = new VueRouter({
    //默认是hash
    mode:'histroy', 
    routes:[...]
})

以后上线需要服务器端支持，开发环境webpack给规避掉了history模式的问题