Vue router的使用（学习笔记）

Vue router的使用（学习笔记）
1、打开终端安装router命令如下
npm install vue-router或cnpm install vue-router（建议使用cnpm下载）或yarn add vue-router
2、在新建router.js中引用如下代码（文件健在src目录里）

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

Vue.use(VueRouter)

3、在src中新建view文件夹，在view新建例如：Home文件夹，在文件夹中新建index.vue
（从下面的代码中我们可以发现引入了一个组件Content，我们需要单独写一个组件）

<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>

4、在router.js中设置

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

5、在App.vue中的div内引入

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png"> //我放入的图片
    <router-view></router-view>
  </div>
</template>

6、在main.js中 import router from ‘./router’

import router from './router'

最后呈现的效果图：

路由的嵌套使用
children:[]
1.首先我在components 文件夹下新建三个组件Text1、Text2、Text3
2.在route.js进行配置（这里就紧接着我上边的代码继续写了，稍微会有些变话的是我在home下嵌套了三个页面，会使用到childern:[]）

export default new VueRouter({
    // 配置路由信息
    routes: [{
            path: '/',
            redirect: '/home' //设置默认指向
        },
        {
            path: '/home',
            component: Home,
            // Vue中使用children实现路由的嵌套
            // 使用 children 属性，实现子路由，同时，子路由的 path 前面，不要带 / ，
            // 否则永远以根路径开始请求，这样不方便我们用户去理解URL地址
            children: [{
                    path: '/',
                    redirect: 'text1', //默认指向（出现的第一个页面）
                },
                {
                    path: 'text1',
                    component: Text1,
                },
                {
                    path: 'text2',
                    component: Text2,
                },
                {
                    path: 'text3',
                    component: Text3,
                }
            ]
        }
    ]
})

2.在index.vue中使用，实现页面的来回切换

<template>
  <div id="home">
      <Counte /> //不要忘在components:{}引入
     <router-link to="/home/text1"> |
        <span>text1</span>
      </router-link> 
      <router-link to="/home/text2"> |
        <span>text2</span>
      </router-link> 
      <router-link to="/home/text3">
        <span>text3</span>
      </router-link> 
      <router-view></router-view>
  </div>
</template>

最后呈现的效果图：（会根据不同页面显示不同内容）