老实巴交的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
});