简介：

vue-router官网
用 Vue.js + vue-router 可以快速创建SPA（单页应用程序），是非常简单的。使用 Vue.js ，我们已经可以通过组合Component来组成应用程序。
引入 vue-router 的过程：将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。

直接使用方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    // 注意顺序不能颠倒！！！
    <script src="D:\Github\vue\lib\vue.js"></script>
    <script src="D:\Github\vue\lib\vue-router.js"></script>
    <script>
        window.onload = function() {
            // 1. 准备template
            var A = Vue.extend({
                template: "<h3>我是A</h3>"
            })
            var B = Vue.extend({
                template: "<h3>我是B</h3>"
            })
            // 2. 准备routes
            const routes = [{
                path: "/A",
                component: A,
            }, {
                path: "/B",
                component: B,
            }, {
                path: '*',// 默认打开
                redirect:'/A'
            }]

            // 3. 调用vue-router
            const router = new VueRouter({
                //这里等价于routes： routes，不要随意写其他的名字！！！
                routes,
            })
            // 4. 挂载到vue上
            new Vue({
                router,
                el: '#box'
            })
        }
    </script>
</head>
<body>
    <div id="box">
        <div>
            <router-link to="/A">A</router-link>
            <router-link to="/B">B</router-link> 
        </div>
        <div>
            <router-view></router-view>
        </div>

    </div>
</body>
</html>

模块化使用方法

部分目录结构如下：

├──node——modules
├──src
    ├──assets
    ├──components   // 用来存放组件A.vue和B.vue
    │   ├──A.vue
    │   └──B.vue
    ├──App.vue
    ├──main.js
    ├──router.config.js // router.config.js 用来存放路由信息
    └──...

一、组件定义

A.vue

<template>
  <h3>我是A</h3>
</template>

<script>
export default {

}
</script>

<style>

</style>

B.vue

<template>
  <h3>我是B</h3>
</template>

<script>
export default {

}
</script>

<style>

</style>

二、路由信息
router.config.js

import A from './components/A.vue'
import B from './components/B.vue'

export default {
    routes: [{
        path: "/A",
        component: A,
    }, {
        path: "/B",
        component: B,
    }, {
        path: "*",
        redirect: '/A'
    }]
}

三、调用router并挂载到vue上
main.js

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

import App from './App.vue'
import routes from './router.config.js'

Vue.use(VueRouter);

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

四、router-link与router-view
App.vue

<template>
  <div id="app">
    {{msg}}
    <ul>
      <li>
        <router-link to='/A'>A</router-link>
        <router-link to='/B'>B</router-link>
      </li>

    </ul>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style>

</style>

Vue入门（七）---- vue-router

简介：

直接使用方法：

模块化使用方法

猜你喜欢