在vue項目中引入vue-router並使用

1.使用命令行引入vue-router

cnpm install vue-router --save

在package.json文件中， 可以看到vue-router安裝成功

2.與main.js同級創建router.js

 

 2.1.router.js文件的內容如下

HelloWorld組件為模板組件

import Vue from 'vue';
import VueRouter from 'vue-router';
import HelloWorld from './components/HelloWorld.vue'

Vue.use(VueRouter);

const routes = [
    {
        path: '/helloworld',
        component: HelloWorld
    }
];

const router = new VueRouter({
    routes
});

export default router

3.在main.js中把剛剛創建的router.js引入，並使用

 

4.在app.vue中寫入router-view標簽

 

 vue-router已經創建部署完畢

5.在url地址欄中輸入：http://localhost:8080/#/helloworld，即可訪問