一. VueRouter

1.VueRouter基本配置

在创建项目的时候选择router，就会自动帮你配置上路由需要的文件。当然你也可以不嫌麻烦手动配置：

1.在src下面创建一个router.js文件（系统默认配置的话是在src下面创建一个router文件，在里面创建一个index.js文件）。

import Vue from 'vue'//应用在Vue里所以要引入Vue
import VueRouter from 'vue-router'//引入路由router

Vue.use(VueRouter)//在Vue中使用router

const routes = [//在routes中配置路由
  
]
const router = new VueRouter({
  routes
})

export default router

2.在main.js中引入router.js文件，再在实例中使用

import Vue from 'vue'
import App from './App.vue'
import router from './router'//引入

Vue.config.productionTip = false

new Vue({
  router,//实例化使用
  render: h => h(App)
}).$mount('#app')

2.配置导航路由和出口路由

创建views文件夹，把要切换的页面放在views里，把要用到的组件还放在components里。

比如在views里创建Home.vue和About.vue页面。?为了实现页面切换，要在index.js里配置路由

1.引入Home.vue和About.vue文件

2.在routes里配置路由信息

import Vue from 'vue'//应用在Vue里所以要引入Vue
import VueRouter from 'vue-router'//引入路由router
import Home from '../views/Home.vue'//引入页面
import About from '../views/About.vue'//引入页面

Vue.use(VueRouter)//在Vue中使用router
const routes = [//在routes中配置路由
  //数组里的一个对象就代表一条路由信息
  {path: '/home',name: 'Home',component: Home},//配置路由信息
  {path: '/about',name: 'About',component: About}
]
const router = new VueRouter({
  routes
})
export default router

3.在App.vue中设置路由出口

<template>
  <div id="app">
    <div id="nav">
      //设置路由入口
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

4.重定向

const routes = [//在routes中配置路由
  //数组里的一个对象就代表一条路由信息
  {path: '/', redirect: '/home' },//重定向 访问根路径进入/home
  {path: '/home',name: 'Home',component: Home},//配置路由信息
  {path: '/about',name: 'About',component: About}
]

3.路由history和hash模式

1.history模式

概念：vue-router默认hash模式，url使用#定位后面路由，对seo(搜索引擎优化)不利，设置history就可以使用普通的url模式，即history模式，充分利用history.pushStateAPI来完成URL跳转而无需重新加载页面

const router = new VueRouter({
  mode: 'history',
  routes
})

history和hash的区别（面试题）：

1).history不带#，hash带#

2).考虑url的规范，要用history模式，它没有#，是个正常的url，符合开发的习惯

3).使用Vue或React制作的app有的url不允许带#，所以要用history模式过滤掉#

4).使用history的问题：在访问二级页面的时候，做刷新操作会出现404错误，那么需要后端配置一下重定向到我的首页路由。

5).hash兼容性很强，而history是HTML5新出的API(应用程序编程接口)。

4.配置动态路由

1.通过动态路由传递参数

{
    path: '/mine/:name/:sex',//通过动态路由进行参数传递
    name: 'Mine',
    component: Mine
  },

则?http://localhost:8080/#/mine?到达不了mine?http://localhost:8080/#/mine/lk? 才能到达mine?才能到达mine

通过':'表示要传递参数?

1.1组件路由参数获取

1.1.1根据路由对象获取路径参数

通过this.$route.params和this.$route.query获取输入的参数值

<script>
    export default {
        name:'Mine',
        created() {
            console.log(this.$route);
            console.log(this.$route.path);//路径
            console.log(this.$route.params);//通过/输入的参数值
            console.log(this.$route.query);//通过？输入的参数值
        },
    }
</script>

<template>
  <div class="mine">
    <h1>This is an mine page</h1>
    <p>-------------------------</p>
    <h2>根据路由对象获取路径参数</h2>
    <p>姓名：{{$route.params.name}}</p>
    <p>性别：{{$route.params.sex}}</p>
    <p>年龄：{{$route.query.age}}</p>
    <p>体重：{{$route.query.weight}}</p>
  </div>
</template>

1.1.2 根据属性获取路由参数

使用props传参

在路由信息中通过props:{name:'Anna'}传入参数，在页面Mine.vue中使用props接收参数

1.1.3 根据路由对象和属性获取路由参数

将路由信息中的props:true 这样既可以通过路由对象传参又可以通过属性传参（具体见文件代码），但通过？传递的参数传不了。如果非要想传，可以：

1.1.4 通过函数获取路由参数

定义一个函数给props传参（具体见文件代码）使用函数传参的话就可以把用？传递的参数也一起传进去啦~

2.嵌套路由

在一级路由的路由信息中加入children键

{
    path: '/home',
    name: 'Home',
    component: Home,
    children: [
      {path: '/home',redirect: '/home/shop'},
      {path: 'news',name: 'News',component: News},//二级路由不用加斜杠
      {path: 'shop',name: 'Shop',component: Shop}
    ]
  },

注意路由导航不要从根路径开始写，要从一级路由路径开始写~

<template>
  <div class="home">
    <h1>This is an home page</h1>
    <div id="nav">
      <router-link to="/home/news">首页新闻</router-link>|
      <router-link to="/home/shop">首页购物</router-link>
    </div>
    <!-- 二级路由出口 -->
    <router-view/>
  </div>
</template>