Vue — 路由

一、路由的使用步骤

1.Vue2.0版本下载对应路由3.6.5版本

yarn add vue-router@3.6.5 / npm i vue-router@3.6.5

2.引入路由包

import VueRouter from 'vue-router';

3.安装注册

Vue.use(VueRouter)

4.创建路由对象

const router = new VueRouter()

5.注入到new Vue()中，与Vue建立关联

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

6.创建组件，配置路由规则

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

7.准备导航链接 配置路由出口

      <div>

        <a href="#/find">更多</a>
        <a href="#/my">我的</a>
        <a href="#/friend">圈子</a>

      </div>
      <div>
　　　　　　//路由出口 router-view       
　　　　　　<router-view></router-view>
      </div>
  </div>

二、路由模块封装

1.新建router文件夹

2.导出router使用

import VueRouter from 'vue-router';
import Find from '@/views/Find.vue'
import Friend from '@/views/Friend.vue';
import My from '@/views/My.vue';
import Vue from 'vue';


Vue.use(VueRouter)

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

export default router

 三、声明式导航 

1. 导航链接：vue-router提供了一个全局组件router-link,取代a标签

（1）能跳转，配置to属性，to属性不需要加# ，本质还是a标签

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


a {
  display: inline-block;
  width: 80px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  background-color: #4b4949;
  color: #fff;
  text-decoration: none;
}

.router-link-active {
  background-color: #9b9797;
  color: #c52d2d;
}

（3）自定义配置高亮类名

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

2.跳转传参

（1）查询参数传参

    <!-- to="/path?参数=值" -->
      <router-link to="/find?music=闹海">闹海</router-link>
      <router-link to="/find?music=思如雪">思如雪</router-link>
      <router-link to="/find?music=原点">原点</router-link>
      <router-link to="/find?music=丈母娘入阵曲">丈母娘入阵曲</router-link>
      <router-link to="/find?music=尸祖救场曲">尸祖救场曲</router-link>

　<div>
        {{ $route.query.music }}
 </div>
 created(){
    console.log(this.$route.query)
 }

（2）动态路由传参

const router = new VueRouter({
  routes : [
    {path : '/find',component : Find},
    {path : '/friend/:name',component : Friend}, //1.配置路由规则
    {path : '/my',component : My}
  ],
  linkActiveClass : 'active',
  linkExactActiveClass : 'exactActive',
})

  <!-- 2.配置导航链接 -->

你的朋友<router-link to="/friend/张张">张张</router-link>




 <!-- 3.参数获取 -->
 {{ $route.params.name }}

两种参数的区别：

查询参数适合多个参数传参，语法/path?name=jack&age=14，获取参数的方式$route.query ；

动态路由写法比较简洁适合单个路由传参，需要先配置动态路由，语法/path/jack，获取参数的方式$route.params

四、编程式导航

1.path路径跳转

<button @click="goback">
            back
  </button>

goback(){
        //简写：
        // this.$router.push('/')
        //完整写法：
        this.$router.push({
          path : '/'
        })

 }

2.name命名路由跳转

//路由规则文件
const router = new VueRouter({
  routes : [
    {name :'mine',path : '/my',component : My}, //起个name
  ],
})

//跳转方法

goback(){
        this.$router.push({
          name : 'mine'
 })}

3.传参（同声明式导航一致）

五、路由重定向

说明：重定向-->匹配path后，强制跳转path路径

 

const router = new VueRouter({
  routes : [
    {path : '/',redirect:'/my'},  //强制重定向
    {path : '/find',component : Find},
    {path : '/friend/:name',component : Friend}, 
    {path : '/my',component : My}
  ],
  linkActiveClass : 'active',
  linkExactActiveClass : 'exactActive',
})

 

六、路由404

说明：当路径找不到匹配时，在页面有404提示

const router = new VueRouter({
  routes : [
    {path : '*',component : NotFound}
  ],
})

七、模式设置

（1）hash路由（默认）有#

（2）history路由（常用）没有#  需要后端开发配合配置访问规则

 

const router = new VueRouter({
  routes : [],
  mode:'history',//hash

})