Vue Router官网链接

介绍

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌

1. 安装

npm install vue-router --save-dev

--save 添加到生产依赖中【packae.json文件的dependencies字段中】

2. 在项目的src文件中新建一个router文件夹，在文件夹中新建index.js文件

3. 在index.js文件中写入

import Vue from 'vue'   //引入Vue
import Router from 'vue-router'  //引入vue-router

Vue.use(Router)  // 1.通过Vue.user(插件),安装插件
export default new Router({ // 2. 创建Router对象并导出
   
})

4. 在main.js 文件的Vue实例中挂载创建的路由实例

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

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router, //【挂载】
}).$mount('#app')

5. 新建路由组件

5.1 在src的components文件中创建组件【不固定】

创建home.vue和study.vue 两个组件，并在组件中填入自定义数据

6. 在router文件夹的index.js中配置路由映射：组件和路径映射关系

import Vue from 'vue'
import Router from 'vue-router'
import home from '@/components/home'  //引入根目录下的home.vue组件
import study from '@/components/study'  //引入根目录下的study.vue组件

Vue.use(Router)

export default new Router({
    routes: [              //配置路由，这里是个数组
        {                    //每一个链接都是一个对象
            path: '/',         //链接路径
            name: 'home',     //路由名称，
            component: home   //对应的组件模板
        },
        {
            path: '/study',
            name: 'study',
            component: study
        }
    ]
})

7. 在App.vue使用路由

使用路由：通过 <router-link>和<router-view>

• <router-link>该标签是一个vue-router中已经内置的组件，它会被渲染成一个a标签
• <router-view>该标签会根据当前的路径，动态渲染出不同的组件

<template>
  <div id="app">
    导航 ：
    <router-link to="/">首页</router-link>
    *****
    <router-link to="/study">其他页面</router-link>
    <hr />
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

<style>
</style>

效果图：

备注：

1. 网页的其他内容，比如顶部的标题/导航或者底部的一些版权信息等会和<router-view>处于同一个等级；
2. 在路由切换时，切换的是<router-view>挂载的组件，其他内容不会发生改变