vue路由以及使用vue-router步骤

vue-router使用步骤：

1.下载对应路由vue-router的3版本 (默认下载是4版本，4针对vue3，这里要下载3版本针对vue2)

npm i vue-router@3

2.在main.js文件中导入对应的vue-router

import VueRouter from 'vur-router'

3.在main.js中使用vue-router

Vue.use(VueRouter)

4.引入对应的页面组件，并配置对应的路由规则

// 引入对应页面组件
import 组件名 from '组件路径'
......

// 配置路由规则
const routes = [
    { path:'/路由名',component:'组件名' },
    ......
]

5.创建路由实例对象

const router = new VueRouter({
    mode:'history', // 路由的history模式（普遍使用）可以去掉url的#，默认是hash，带#
    routes:routes
})

6.将创建好的路由对象挂载到vm根实例上去（App）

7.在App.vue中，定义对应的路由导航

<router-link to='path'></router-link>
// to 也可以是动态的 :to='path'

8.在App.vue中，定义匹配到的组件存放的位置，使用router-view

<router-view></router-view>

解决问题：点击重复路由控制台出现报错情况，可粘贴此段代码到配置路由的js文件中

const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch((err) => err);
}

路由导航方式

第一种，声明式导航

类似于<a>标签的连接

<router-link :to='path'></router-link>
<router-link :to='{ path:"url" }'></router-link>
<router-link :to='{ path:"url" , query:{ name:"张三",age:10 } }'></router-link>
    // query参数导航 获取参数：this.$route.query
<router-link :to='{ name:'name' , params:{ name:"张三",age:10 } }'></router-link>
    // params参数导航 获取参数：this.$route.params

第二种，编程式导航

触发事件实现路由跳转 类似于loaction.href

// 在App.vue定义一个点击事件，在事件方法中写
this.$router.push('path')
this.$rouer.push({ path:'path' , query:{ key:value,.... } })
this.$router.push({ name:'name' , params:{ key:value,.... } })
//获取参数：和声明式导航一样
this.$router.go(-1) / this.$router.back()   //返回上一页 

query和params的区别：

• query传参的是由path引入，params传参是由name引入；
• query相当于get，会显示在url中，params相当于post，不会显示在url中
• 注：有path，params会被忽略而导致失效
• 注：官网上我们知道路由的name不能重复，path是可以重复的，所以在函数编程中我们可以用变量控制路径

路由重定向

redirect

语法：

// 配置路由的js文件中 (重定向的三种方式)
const routes = [ { path:'/', redirect:'path'} ]
const routes = [ { path:'/', redirect:{name:路由别名}} ]
const routes = [ { path:'/', redirect:to=>{ return path }} ]

路由的嵌套

在路由的配置规则中，可以使用嵌套路由

语法：

const routes = [
    { path : /路由名 , component : 组件名 ,chilren:[
        {path : 路由名 , component : 二级组件名},
        // 注：children中的path没有/，直接写嵌套路由（嵌套路由中不能有/,/是代表一级路由）
        .....
    ]},
    .....
]

// 在对应的一级组件上设置对应的路由放置位置
<router-view></router-view>

注意点：

1. 嵌套路由的path如果是'',那么该路由组件为默认显示的组件
2. 嵌套路由的path没有/，直接写路由（嵌套路由不能有/，/代表是一级路由，如果要写就必须写全，将一级路由一起写，（/一级/二级））
3. 嵌套路由只能用path显示默认组件，不能用name别名，负责不能将无法显示默认组件

404路由

// 路由规则代码：
const routes = [
    ....
    { path : '*' , component : 组件名 , name: 别名 }  // 404路由要放在最后面
]

动态路由

定义：路由中由一部分规则不是固定的，而是动态的

语法：

在App.vue中
<router-link :to='"/路由名/"+id'>页面</router-link>

// 在配置路由js文件中
// 路由配置规则定义
{ path : '/路由名/:id ' ,component : 组件名 }

//对应组件获取参数方法：
this.$route.params.id

注意：设置动态路由参数可有可无，在路由规则中，加'?'

{ path : '/路由名/:id?' , component : 组件名 }