一、配置路由

在src下新建router/index.js文件

import Vue from ‘vue‘
import VueRouter from ‘vue-router‘
// 把VueRouter安装为Vue项目的插件
Vue.use(VueRouter)
// 创建路由的实例对象
const router = new VueRouter()
export default router
?

mian.js中

// 导入路由模块 拿到路由的实例对象
import router from ‘@/router/index.js‘
//挂载
new Vue({
  render: h => h(App),
  // 在Vue项目中，要想把路由用起来，必须把路由实例对象，通过下面的方式进行挂载
  // router:路由的实例对象
  router
}).$mount(‘#app‘)
?

二、声明路由

在index.js下定义路由映射规则

App2 template中

router-link代替a标签

<template>
  <div class="app-container">
    <h1>App2 组件</h1>
      <!-- <a href="#/home">首页</a> -->
    <router-link to="/home">首页</router-link>
    <router-link to="/movie">电影</router-link>
    <router-link to="/about">关于</router-link>
    <!-- <a href="#/movie">电影</a> -->
    <!-- <a href="#/about">关于</a> -->
  <router-view></router-view>
    <hr />
  </div>
</template>

导入各组件

import About from ‘../components/About.vue‘
import Home from ‘../components/Home.vue‘
import Movie from ‘../components/Movie.vue‘

routes规则

const router = new VueRouter({
routes:[
    {path:‘/about‘,component:About},
    {path:‘/home‘,component:Home},
    {path:‘/movie‘,component:Movie}
]
})

配置Router