vue 路由（router）、路由切换页面

vue 路由（router）

首先安装路由
在vscode终端中安装路由

npm：npm install vue-router

cnpm：cnpm install vue-router

yarn：yarn add vue-router

新建router.js
在router.js中引用：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

在src文件夹中新建文件夹例如：Home在Home中新建文件index.vue

<template>
  <div id="home">
      <Content />
  </div>
</template>
<script>
  import Content from "../../components/Content.vue"
  export default {
    name: "index",
    data(){
        return{
        }
    },
    components:{
        Content,
    },
    methods:{
    }
  }
</script>
<style scoped>
</style>

ps：此处代码div中和import······以及data中的Content是引用的自己组件，可以不写，如果有组件请换成自己的了路径(关于vue组件的引用请看上一篇文章)

在router.js中设置如下两部

<script>
import Home from './views/Home/'
2、export default new VueRouter ({
    routes: [
      {
        path: '/',
        redirect: '/home'  //设置默认指向
      },
      {
        path: '/home',
        component: Home
      }
    ]
})
</script>

路径要写对，名字要写对如果路由很多，默认指向可以更改

在要更改的页面引用路由

<div>
<router-view></router-view>
</div>

方法和引用组件类似

在main.js中 import router from ‘./router’在new的实例中增加router，具体如下：

路由的页面切换

将要切换的页面封装成组件

在router中引用组件

Vue中使用children实现路由的嵌套

使用 children 属性，实现子路由，同时，子路由的 path 前面，不要带 / ，

否则永远以根路径开始请求，这样不方便我们用户去理解URL地址

用<router-linK></router-link>实现路由的tab切换，用<router-view></router-view>将页面渲染显示出来

END！！！