Vue Router

Vue.js 官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。

npm安装vue-cli（vue-cli是vue的脚手架）

npm install vue-cli -g

vue --version

创建项目

创建项目：

vue init webpack vue-demo

npm install命令作用：

将项目下的package.json的devDependencies字段里的插件会被自动安装到node_modules下。

npm install切换淘宝源：

npm config set registry https://registry.npm.taobao.org

npm install --registry=https://registry.npm.taobao.org

项目运行：

npm run dev

项目中使用路由

1、src/App.vue中添加

<header>
  <!-- router-link 定义点击后导航到哪个路径下 -->
  <router-link to="/">Index</router-link>
  <router-link to="/home">Home</router-link>
  <router-link to="/about">About</router-link>
</header>

2、src/components/中添加home.vue和about.vue

hoem.vue

<template>
    <div>
        <h1>home</h1>
        <p>{{msg}}</p>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                msg: "我是home 组件"
            }
        }
    }
</script>

about.vue

<template>
    <div>
        <h1>about</h1>
        <p>{{aboutMsg}}</p>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                aboutMsg: '我是about组件'
            }
        }
    }
</script>

2、src/router/index.js路由修改

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

// 引入组件
import home from '@/components/home.vue';
import about from '@/components/about.vue';

Vue.use(Router)

const routes = [
  {
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  },
  {
    path:"/home",
    component: home
  },
  {
    path: "/about",
    component: about
  }
]

var router =  new Router({
  routes: routes
})
export default router;

4、运行项目

npm run dev

注意，注释掉如下图所示：

项目运行效果