vue的路由vue-router

路由允许我们通过不同的 URL 访问不同的内容，换句话说通过路由可以切换不同的页面

1、安装、配置路由

进入项目根目录
npm install vue-router --save
新建index.js文件,并在此文件中中引入vue-router路由模块
import VueRouter from 'vue-router'
使用vue-router
Vue.use(VueRouter)

在main.js中引入
import router from './router'

2、定义路由、配置路由路径

import Vue from 'vue'
import Router from 'vue-router'
import Child1 from '@/components/Child1'
import GrandSon1 from '../components/GrandSon1'

Vue.use(Router)

// 定义路由
export default new Router({
routes: [
 {
   path: '/', // path 设置为 “/” ，默认显示该页面
   name: 'child1',
   component: Child1
 },
 // 第一种方式
 {
   // 动态路径  参数用：隔开
   // 参数可以通过this.$route.params.id获取
   path: '/child1/:id',
   // 配置此参数，动态路径后面的参数就可以作为组件的props使用，可以不加此参数
   props: true,
   // 命名路由，通过名称跳转，可以不加此参数
   name: 'child1',
   component: Child1,
   // 子路由
   children: [
     {
       // “/”开头的嵌套路径会被当作根路径
       // 在生成路由时，主路由上的path会自动加上
       path: 'grandSon1',
       name: 'GrandSon1',
       component: GrandSon1
     }
   ]
 },
 // 第二种方式
 {
   path: '/child2', // 动态路由
   name: 'child2', // 命名路由
   component: () => import('@/components/Child2')
 }
],
// 默认为hash模式 链接有#
mode: 'history' // mode 设置为history ，去掉地址栏上的 # 号
})

在父组件中加入路由渲染模块
<router-view></router-view>

3、路由跳转

 <!-- 直接按照路径进行跳转  跳转到child1，id为123 -->
<router-link to="/child1/123">Home</router-link>
 <!-- 直接按照路径进行跳转  跳转到child1，id为key的值-->
<router-link ：to="'/child1/'+key">Home</router-link>

<!-- 按照路由名称跳转，命名路由的方法(必须给路由命名) -->
<router-link :to="{ name: 'child1' }">child1</router-link>
<router-link :to="child1">child1</router-link>
<router-link :to="{name:'child2',param:{id:'123'}}">child2组件</router-link>

 router.go(1) ； // 在浏览器记录中前进一步，等同于 history.forward( )
 router.go(-1)； // 后退一步记录，等同于 history.back( )
 router.go(3)；  // 前进 3 步记录

4、hash模式和history模式

在hash模式下，链接是有#的

在index.js中设置history，去除#

5、路由嵌套

所谓路由嵌套，就在路由到的组件之中还要进行其它组件的路由
比如我点击按钮进入child1页面，在child1页面还能进入孙子页面
在index.js页面中加入children配置

在child1组件中加入孙子组件的路由