VUE-8.路由

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

引入js文件的方式

引入vue-router.js文件

<script src="js/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

定义若干个组件(为了跳转用)

let goodlist = {
   template:"<div>商品列表</div>"
}

let goodsdetail = {
   template:"<div>商品详情</div>"
}

定义路由对象

1 路由配置（json数组）
let routes = [
    {path:'/goodslist',component:goodlist},
    {path:'/goodsdetail',component:goodsdetail}
];

2 实例化一个vueRouter对象  
let router = new VueRouter({
       routes
});

挂载vueRouter对象

实例化vue对象，（把vueRouter对象，挂载（注册）到vue对象里）

let vm = new Vue({
    el:"#app",
    router
});

跳转代码（声明式）

    <div id="app">
        <h1>路由跳转</h1>
        <hr/>
        <router-link to='/goodslist'>商品列表</router-link>
        <router-link to='/goodsdetail'>商品详情</router-link>
        <hr/>
        <router-view></router-view>
    </div>

解释：

==<router-link></router-link>: 超链，相当于标签a 。==
==<router-view></router-view>: 组件显示的位置。==

模块化的方式（脚手架里）

脚手架安装时，会默认安装vue-router。

安装

npm i vue-router -S

定义组件（单文件组件）

如：HelloWorld.vue

路由配置和引入

创建vueRouter对象（定义路由对象，配置路由）

// src/router/index.js
import Vue from 'vue'

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

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

//3. 路由配置
let routes = [
  {path: '/', component: HelloWorld}
  {path: '/home',component: Home}, //route  一条路由的配置
]

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

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

在main.js中引入vueRouter对象，并植入到根属性**

// src/main.js
import router from './router/index';

new Vue({
  el: '#app',
  router,
  ………………
})

跳转

声明式跳转

<router-link to="/home">声明式跳转</router-link>
<router-link to="/home" tag='li'    active-class='类名' >声明式跳转</router-link>

<router-view>展示区</router-view>

router-link 组件属性:

to:跳转的路径
tag='li' 指定编译后的标签，默认是 a 标签。
active-class='类名' 指定激活后的样式模糊匹配
exact-active-class='类名' 指定激活后的样式严格匹配
router-link和router-view组件是vue-router插件提供的

编程式跳转（编程式导航）

先了解 $router和$ route

$router： 表示vueRouter对象，由于我们在vue对象里把vueRouter对象植入到根属性里，所以，在组件内部是可以使用$router拿到该对象的。
$route：表示匹配到的当前路由，可以简单粗暴的理解为，路由配置中的某个json对象。当然，这个对象里的信息比路由配置的更多。

编程式导航

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

// 字符串
$router.push('home')

// 对象
$router.push({ path: 'home' })

this.$router.replace({name:'...'}) //替换一个路由（不记录到历史记录)
this.$router.go(-1|1)|back() //回退/前进

动态路由匹配

1、路由参数

路由配置

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头，相当于在path里声明了一个变量 id
    { path: '/user/:id', component: User }
  ]
})

跳转

//匹配上 '/user/:id' 路径，01001的值会赋给id
<router-link to="/user/01001">用户01001的信息</router-link>

组件中获取id的值

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

2、捕获所有路由或 404 Not found 路由

1)、通配符 *

'*'  会匹配所有路径
'/user-*'  会匹配以 `/user-` 开头的任意路径

注意：路由匹配的顺序是按照路由配置的顺序进行的，所以，你肯定不能把 * 的路径放在最前面，否则，后面的路由配置都不起作用了。

当使用一个通配符时，$route.params 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过通配符被匹配的部分。

如：

路由配置：

{
  // 会匹配以 `/user-` 开头的任意路径
  path: '/user-*'
}

路由跳转：

this.$router.push('/user-admin')

组件里：

this.$route.params.pathMatch // 'admin'

404

{
  path: '*',
  component: NoPage组件
}

命名路由

给路由起个名字，就可以使用名字来指定路由

1、路由配置

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

2、跳转

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

重定向

{
  path: '/',  //默认页
  redirect: '/home' //配置型跳转
},

总结：路由传参：

一、params

1、传：

1）、动态路由匹配（路由配置里写）

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

2）、跳转时传参

1)、跳转时，使用字符串
//声明式
<router-link to="/user/01001">用户01001的信息</router-link>
//编程式
$router.push("/user/01001");

   
2）、跳转时，使用对象
//声明式： 命名的路由，同时传参
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
//编程式：
$router.push({ name: 'user', params: { userId: '123' }})

2、接：

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

二、query

1、传：


// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
注意：如果提供了 path，那么params 会被忽略

name 对应params

path对应query

2、接

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

路由传参和props

一个组件在项目中，有两种使用方式（组件显示在浏览器上）：

1、自定义标签的方式，外部给组件传数据，用props

2、使用路由跳转的方式，外部给组件传数据，用params或者query。

如果，一个组件需要从外部传入数据，并且在项目中，这两种方式的使用都会出现，那么，在组件内部就需要适应这两种情况。

如何使用 props 将组件和路由解耦：

props 被设置为 true，route.params 将会被设置为组件属性。