vue-router路由

vue-router功能了解：

vue-router是Vue.js官方的路由插件，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。

接下来会根据一个简单的例子来介绍路由实现的效果。

首先你需要了解v-cli(上一篇博文有讲到vue-cli如何搭建)，在用vue-cli搭建的项目中。vue-router已经自动下载生成。只需要直接编写代码就好。

1.搭建好后，会生成如下图的目录：



2.代码部分：

APP.vue部分：

<template>
<div id='app'>
<div>
<ul>
<router-link to='/a'  tag='h1' active-class="active"><a href='http://baidu.com'>百度</a></router-link>
<router-link to='/b'  tag='h1' active-class="active"><a href='https://hao.360.cn'>360搜索</a></router-link>
</ul>
</div>
<div>
<router-view></router-view>
</div>
</div>
</template>

<script>
export default {
name: 'app'
}
</script>

main.js部分：

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

Vue.use(router)

new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})

router–>index.js:

import Vue from 'vue'
import Router from 'vue-router'//路由
import A from '@/components/a'//components下的a页面
import B from '@/components/b'//components下的b页面

Vue.use(Router)
//导出路由配置
export default new Router({
routes: [
{
path: '/a',
name:'a',
component: A
},
{
path: '/b',
name:'b',
component: B
}
]
})

a.vue:

<template id='a'>
<div>
<h1>{{msg}}</h1>
</div>
</template>

<script>
export default {
data() {
return{
msg:'我是A组件'
}
}
}
</script>

b.vue:

<template id='b'>
<div>
<h1>{{word}}</h1>
</div>
</template>

<script>
export default {
data() {
return{
word:'我是B组件'
}
}
}
</script>