vue 使用 vue-router

安装

npm install vue-router

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：

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

Vue.use(VueRouter)

新建 router/index.js 文件，路由就是在这里配置的。

// 引入 vue 和 vue-router 组件
import Vue from 'vue';
import VueRouter from 'vue-router';

// 
Vue.use(VueRouter);


import PageOne from '../components/PageOne.vue';
import PageTwo from '../components/PageTwo.vue';

// 路由配置，放在router实例中
const router = new VueRouter({
    routes: [
    {
        path: '/PageOnePath',
        component: PageOne
    },
    {
        path: '/PageTwoPath',
        component: PageTwo
    }
    ]
});


export default router;

在 main.js 中引入router的配置文件，并注册 router 到 vue实例中

import Vue from 'vue'
import App from './App.vue'


// 1.引入刚刚配置的路由（router/index.js）
import router from './router';


Vue.config.productionTip = false


// 注册 router 到vue实例中，App为根组件，App组件内部会有路由功能
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

将 <router-view/> 即可路由组件要显示的地方。

一般 App.vue 就是应用的首页，添加 <router-view/> 到App.vue。

<template>
    <div id="app">
      <router-view></router-view>
    </div>
</template>