vue框架下使用路由vue-router

首先安装vue-router框架

在终端中使用命令 npm install vue-router安装。

在main.js文件中需要做配置

import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router";

//开启debug模式
Vue.config.debug = true;

Vue.use(VueRouter);

// 定义组件, 也可以从别的文件引入
const secondcomponent = { template: '<div><h2>我是第 2 个子页面</h2></div>' }

// 从别的文件中引入组件
import firstcomponent from './firstComponent.vue'


// 创建一个路由器实例
// 并且配置路由规则
const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    {
      path: '/first',
      component: firstcomponent
    },
    {
      path: '/second',
      component: secondcomponent
    }
  ]
})

// 现在我们可以启动应用了！
// 路由器会创建一个 App 实例，并且挂载到选择符 #app 匹配的元素上。
new Vue({
  el: '#app',
  router: router,
  render: h => h(App)
})

firstComponent.vue文件代码如下：

<template>
  <div>
    我是第一个路由
  </div>
</template>

先插入显示路由界面的标签

<router-view class="view"></router-view>

在需要使用路由的地方调用

<router-link to="/first">第一个路由</router-link>
<router-link to="/second">第二个路由</router-link>