vue-router 2 簡易入門

準備工做

webpack-simple版的vue項目初始是沒有vue-router的，須要另外安裝

新建一個demo項目

vue init webpack-simple demo //一路 Enter + y
cd demo
npm i

安裝vue-router

npm i -S vue-router

配置router

新建index.vue組件，路徑爲/demo/src/page/index.vue
接下來會圍繞index.vue做爲例子

方案一：直接寫入main.js文件中

簡單配置以下

// main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
Vue.use(VueRouter);

import index from './page/index.vue'//也可以使用下面的懶加載寫法
//const index    = (resolve) => require(['./page/index.vue'],resolve)

//路由指向
const routes = [
  { path: '/', component: index }
];
const router = new VueRouter({
  routes: routes,
  mode: 'history',//history模式比較像正常的url，hash模式帶有#號
  // mode: 'hash',
});
new Vue({
  el: '#app',
  router,
  render: h => h(App),
});

方案二：新建單獨的router文件

創建router.js文件，其與main.js同級

// router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter);

import index from './page/index.vue'
//const index    = (resolve) => require(['./page/index.vue'],resolve)

//路由指向
const routes = [
  // { path: '/', redirect: '/index' },
  { path: '/', component: index },
];
export default new VueRouter({
  routes: routes,
  mode: 'history',
  // mode: 'hash',
  // base: __dirname
})

// main.js

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

new Vue({
  el: '#app',
  router,
  render: h => h(App),
});

方案三：新建router文件夾下index.js文件

此法也是webpack版vue項目router默認用法

// router/index.js

//與前面的router.js類似，不一樣處爲import的路徑
import index from '../page/index.vue'
...

修改App.vue

通過上面的配置，路由匹配到的組件將會渲染到App.vue裏的<router-view>標籤中

// App.vue

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

使用router-link標籤

與<a>標籤相似，to=「」中即爲路由中設置的url，點擊此標籤連接會將相應的組件渲染到頁面中，產生「跳轉」的感受

<router-link to="/index">主頁</router-link>

完成

//demo
npm run dev //啓動可見index.vue做爲首頁內容渲染到了網頁裏

參考列表

使用Vue-Router 2實現路由功能
Getting Started

最後

詳盡使用方法可閱讀官方文檔