Vue---VueRouter

VueRouter使用步骤

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

yarn add vue-router@3.6.5

2.引入 在main.js文件中写

import VueRouter from 'vue-router'

3.安装注册

Vue.use(VueRouter)

4.创建路由对象

const router = new VueRouter()

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

new Vue({

  router,

  render: h => h(App),

}).$mount('#app')

6.创建需要的组件（views目录），配置路由规则

7.配置导航，配置路由出口（路径匹配的组件显示的位置）

<router-view></router-view>

最终效果

@相当于src目录

link自定义高亮类名

声明式导航---跳转传参

目标：在跳转路由时，进行传参

1.查询参数传参（比较适合传多个参数）

语法：to=“/path?参数名=值&参数名2=值”

对应页面组件接收传递过来的值  $route.query.参数名

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

①配置动态路由

②配置导航链接

to=“/path/参数值”

③对应页面组件接收传递过来的值

$route.params.参数名  这里是words

3.动态路由参数可选符

vue路由---重定向

语法：{path:'/',redirect:'/home'} 前面是匹配路径，后面是重定向到的路径

vue路由---404

位置：配在路由最后

语法：{path:'*',component:NotFind}

vue路由---模式设置

①hash路由（默认）

②history路由（常用）

编程式导航---基本跳转

1.path路径跳转（简易方便）

2.name命名路由跳转（适合path路径长的场景）

注意：需要在配置路由的地方给路由起名字

编程式导航---路由传参

两种传参方式：查询传参+动态路由传参

1.path路径跳转传参（query传参）

对应页面组件接收传递过来的值  $route.query.参数名

2.path路径跳转传参（动态路由传参）

对应页面组件接收传递过来的值  $route.params.参数名

3.name命名路由跳转传参（query传参）

4.name命名路由跳转传参（动态路由传参）