Vue路由插件的作用、路由配置、路由传参方式相关概念理论

路由是什么

vue的路由使用在SPA应用中的组件跳转，相当于多页面的a标签

路由在vue脚手架中的使用

路由的使用

安装

npm i vue-router -S

定义组件

home.vue/goodslist.vue

创建vueRouter对象，并做路由配置和引入

// src/router/index.js中

import Vue from 'vue'

//1. 引入路由包
import Router from 'vue-router'

//2. 安装插件包到Vue上, 
Vue.use(Router)

//3.引入相关组件

//4. 路由配置：路径和组件之间的对应关系
let routes = [
  {
      path: '/', 
      component: HelloWorld
  },
  {
      path: '/home',
         component: Home
  }, //route  一条路由的配置
]

//5.路由实例
let router = new VueRouter({ //插件路由对象
  routes,
});

//5.导出路由实例，让它去控制vue根
export default router

在main.js中引入VueRouter对象，并植入到根

 // src/main.js中
import router from './router';// 找的是当前路径下的route.js 或者 router/index.js

new Vue({
  el: '#app',
  router,//植入根属性，在组件里就可以用this.$router拿到vue-router对象，并且可以使用<router-link>
  ………………
})

---

路由跳转

声明式跳转

        路径使用字符串

<router-link to="/home"></router-link>
<router-link to="/home" tag="li" active-class="类名"</router-link>

         路径使用对象

<router-link :to="{path:'/home'}"></router-link> 

ps:

router-link 组件属性:

        to:跳转的路径

        tag='li' 指定编译后的标签，默认是 a 标签。

        active-class='类名' 指定点击激活后的样式 模糊匹配

        exact-active-class='类名' 指定点击激活后的样式 严格匹配（点哪个哪个用该样式，其他的恢复默认）

编程式跳转

this.$router.push(字符串/对象)：添加一个路由（记录到历史记录）

路由对象有一个栈，记录着所有的路径，push函数会把该路由路径保存到在栈里，<router-link>也会把路径添加到页面栈

this.$router.replace(字符串/对象)：替换一个路由（被替换的路径不记录到历史记录）

会用跳转的路径替换页面栈里最上面的路径

回退前进：

this.$router.go(-1/1)
this.$router.back()
this.$router.forward()

展示：

App.vue文件中

<router-view></router-view>

---

动态理由匹配

含义是路由配置中的path是动态的（存在变量）

路由传参

路由配置

   { 
        path: '/user/:id', 
        component: User 
    }

跳转时

 <router-link to="/user/0102"></router-link>

 组件中获取id的值

 模板里的写法：
 $route.params.id 
 
 脚本里的写法:
 this.$route.params.id

ps：

$router和$route

$router：表示vueRouter对象，由于我们在vue对象里把vueRouter对象植入到根属性里，所以，在组件内部是可以使用$router拿到该对象的。

$route：表示匹配到的当前路由对象，可以理解为，路由配置中的某个json对象。当然，这个对象里的信息比路由配置的更多

捕获所有路由和404路由

路由配置

{
path:'*',
component:notFount
}

注意：路由匹配的顺序是按照路由配置的顺序进行的，所以，不能把*放到最前面，否则所有路由跳转都匹配的是该*路径，一般放在路由配置中的最后一项，用来展示404页面（用户输入错的url所看到的页面）

命名路由

给路由起名，就可以使用名字来跳转

路由配置如下

 {
      path: '/user/:userId', //这种写法，在路径上能够看到参数的值
      path: '/user', 
      name: 'user',
      component: User
    }

跳转（这种写法，在url上看不到参数）

<router-link :to="{name:'user',params:{userid:123}}" ></router-link>

重定向

redirect:

{
  path: '/',                            默认页
  redirect: '/home'               重定向到该路径
}, 

---

路由传参

params传参方式

动态路由匹配的方式（会将参数显示在地址栏）

路由配置

{
        path:"/goods/:id",
        component:Goods
} 

传

<router-link to="/goods/001"></router-link>
this.$router.push("/goods/001")

接

 模板里的写法：
 $route.params.参数名
 脚本里的写法:
 this.$route.params.参数名

params用name的方式匿名传参（不会将参数显示在地址栏）

路由配置

 {
        path:"/goods",
        name:"goods"
        component:Goods
} 

传

<router-link :to="{name:'goods',params:{id:001}}"></router-link> 

接

 模板里的写法：
 $route.params.参数名
 脚本里的写法:
 this.$route.params.参数名

query传参方式（query传参方式会将参数显示在地址栏）

路由配置不用改

传

跳转时，使用对象（使用path）：
声明式跳转： 
<router-link :to="{ path: '/goods', query: { id: '01001' }}">User</router-link>
编程式跳转：
$router.push({ path: '/goods', query: { id: '01001' }})

接

 模板里的写法：
 $route.query.参数名
 
 脚本里的写法:
 this.$route.query.参数名

---

用props属性将组件和路由解耦

路由配置

{ 
    path: '/user/:id',
    component: User,
    props: true 
},

正常跳转传参

组件中接受参数用props即可

 const User = {
  props: ['id'],
}