老實巴交的vue-router教程

老實巴交的vue-router教程

1. 前提條件

   你已經經過官方的vue-cli腳手架生成了一個模板。你已經瞭解了vue的基本寫法，已經寫 好了一些板塊，如今你是否是須要經過瀏覽器來訪問這些頁面了，是否是須要來組合這些模塊了。接下來，咱們就來學習一下vue的路由。

2. vue-route的安裝

   咱們經過node.js的npm更具來安裝：
   全局安裝是：npm install vue-router
   通常咱們是安裝開發環境的：npm install --save-dev vue-router

3. vue-router 的引入

咱們在main.jsw文件中引入vue-router 模塊

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

1. 路由器配置

在文件目錄下創建vue的配置文件router.js

文件中引入事先寫好的模塊

import Login from './login'
import Hello from './components/Hello'
import World from './components/World'
import home from './components/home'
export default {
  mode: 'history',//hash/history
  routes: [
    {
      path: '/',
      component: Login
    },
    {
      path: '/home',
      component: home,
      children: [
      {
      path: 'a',
      component: Hello,
      },
      {
      path: 'b',
      component: World,
      }
      ]
    }
    ]
}

routes就是路由的配置，一看就懂

mode那裏有兩種方式，一種是hash和history
這是H5的兩種模式，百度一下，區別也就是hash模式會在url中多了#號，可是history會比較醜啦。

將route.js引入main.js中就能夠使用了啊!

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
import routerConfig from './router'
/* eslint-disable no-new */
Vue.use(VueRouter);
const router = new VueRouter(
  routerConfig
);
var app = new Vue({
  el: '#app',
  router,
  ...App
});