新建两个测试页面，一个是home页，一个是about页

第一步：添加模版

在pages目录下新建两个模版文件home.vue和about.vue

代码如下：

//home.vue

<template>

         <div>home</div>

</template>

//about.vue

<template>

      <div>about</div>

</template>

第二步：修改App.vue

修改 <template></template> 标签之间的内容如下

<template>
<div id=”app”>
<img src=”./assets/logo.png”>
<!– router-link 定义点击后导航到哪个路径下 –>
<router-link to=”/pages/home”>Home页面</router-link>
<router-link to=”/pages/about”>About页面</router-link>
<!– 对应的组件内容渲染到router-view中 –>
<router-view></router-view>
</div>
</template>

第三步：修改路由 router/index.js

import Vue from ‘vue’

import Router from ‘vue-router’

import HelloWorld from ‘@/components/HelloWorld’

import about from ‘@/pages/about’

import home from ‘@/pages/home’

Vue.use(Router)

export default new Router({

  routes: [

    {

      path: ‘/’,

      name: ‘HelloWorld’,

      component: HelloWorld

    },

    {

      path: ‘/pages/about’,

      component: about

    },

    {

      path: ‘/pages/home’,

      component: home

    }

  ]

})

 

页面效果如下：

需要安装VueRouter2到的项目，

在终端中，我们把当前目录跳转到我们的项目，然后执行npm install vue-router -D命令。如下：

cd ~/Sites/MyWork/vuedemo

npm install vue-router -D

后面加参数-D是让我们的安装的vue-router这个插件写入到package.json配置文件中。以便于下次再其他地方安装的时候，可以一并安装进去，否则，还得再安装一遍。