vue-router 2 簡易入門

BUG來發表於2017-07-12
Vue

準備工作

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

最後

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

相關文章