一、Vue Router路由安装配置

（vscode中）
1.先安装
npm install vue-router或cnpm install vue-router或yarn add vue-router
因为我的在创建项目的时候yarn有点问题选择的包是npm
我用到的命令是 npm install --save vue-router
安装完之后去检查package.json是否安装上

2.安装完之后 就要在src根目录下新建router.js 路由管理 配置路由信息

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：
在router.js中引用这个代码

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

3. 建好路由之后 该去建页面
   在src下新建一个views 在views下新建一个文件夹Home
   在Home文件夹中新建一个页面 index.vue
   在页面写下你要展示在页面的内容 或者导入组件

   这是我的目录结构 我是导入的组件 可以直接在这个页面写东西不导入组件 都可以 我在组件也只写了一点内容
   
   4.建好页面要在router.js中进行页面的配置
   ①先要引入页面

import Home from './views/Home/'

②new实例 routes这个关键字 是个数组对象 来配置路由信息呢 第一组是默认纸箱 一打开之后的那个页面显示 只出现一次
path j

export default new VueRouter ({
    // 配置路由信息
    routes: [
        {
          path: '/',
          redirect: '/home'  //设置默认指向
        },
        {
          path: '/home',
          component: Home
        }
      ]
})

5.配置完路由和页面 就需要把内容渲染到页面 想显示在哪个页面就在页面

<router-view></router-view>

router-view 用于渲染匹配到的组件

6.全部完成 最后要在main.js中配置 main.js是加载各种公共组件的

导入router.js
在new实例中增加router

然后在页面最终效果 我是在app.vue中试的

二、Vue Router 实现页面跳转

1.按照上面的方式在新建一个页面
在views中在建了一个list文件夹 list下在建一个index.vue

2.去router.js中配置一下这个页面
引入 配置路由信息

3.全部配置完在你想要展示的页面写切换

router-link 是一个组件，它默认会被渲染成一个带有链接的a标签，通过to属性指定链接地址。

<router-link to="/">[text]</router-link>

又通过router-view来渲染出来

补： routes也可以进行路由嵌套

想要在那个页面写嵌套 就在那个路由下面接着写个children：[]
Vue中使用children实现路由的嵌套使用 children 属性，实现子路由

同时，子路由的 path 前面，不要带 “/” ，否则永远以根路径开始请求，这样不方便我们用户去理解URL地址

子路由也可以设置默认指向

这里依然用的组件 所以要导入组件 或者页面也可以

渲染完就可以在页面切换