路由
有关路由的详细信息可以去vue的官网去查看，我这里只是自己实例的一个理解和总结。
单页面程序离不开路由的分配，自始至终只有一个页面存活，因此有关路由跳转的逻辑要合理配置
vueRouter_6">vue-Router
选择官方使用的vue-router库，因此要先准备环境
- 安装
$ npm install vue-router
安装之后就要配置路由，但是为了方便维护路由节点，可以创建单独的文件存放路由配置，因此创建router文件夹，添加index.js
- index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
export default new VueRouter({
routes: []
})
然后在根入口文件中导入router，并配置到vue实例中。
- main.js
import router from './router'
new Vue({
el: '#app',
components: {App},
template: '<App/>',
router
})
这样就能在各个模块中使用路由了。
实例
在src目录下创建views目录，分别创建about、home、news、message、detail的vue页面。
- 路由映射文件——index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import About from '../views/About.vue'
import Home from '../views/Home.vue'
import News from '../views/News.vue'
import Message from '../views/Message'
import Detail from '../views/detail.vue'
Vue.use(VueRouter)
export default new VueRouter({
routes: [
{path: '/', redirect: '/about'},
{path: '/about', component: About},
{
path: '/home',
component: Home,
children: [
{path: 'news', component: News},
{
path: 'message',
component: Message,
children: [
{path: 'detail/:id', component: Detail}
]
},
{path: '', redirect: 'news'}
]
}
]
})
路由映射配置好之后就要开始使用了
使用 router-link 组件来导航。 通过传入
to属性指定链接。 默认会被渲染成一个<a>标签
- App.vue
<template>
<div>
<div class="row">
<div class="col-xs-offset-2 col-xs-8">
<div class="page-header">
<h2>Router basic-2</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-xs-offset-2">
<div class="list-group">
<router-link to="/about" class="list-group-item">About</router-link>
<router-link to="/home" class="list-group-item">Home</router-link>
<!-- <a href="#/about" class="list-grou-item router-link-exact-active activeClass">About</a>
<a href="#/home" class="list-group-item">Home</a> -->
</div>
</div>
<div class="col-xs-6">
<div class="panel">
<div class="panel-body">
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
</div>
</div>
</div>
</div>
</template>
样式是使用的bootstrap的cdn，将其以link的形式引用到index.html中。
APP中是分成了两个块，头部用来显示信息，下边则是组件的部分，其中左侧添加了路由导航，右侧将路由匹配到的组件渲染出来。
页面
接着就要实现页面的信息了，当点击左侧的home导航，右侧就会将home的组件渲染到右侧。
- home.vue
<template>
<div>
<ul class="nav nav-tabs">
<li>
<router-link to="/home/news" >news</router-link>
</li>
<li>
<router-link to="/home/message" >Message</router-link>
</li>
</ul>
<div>
<router-view></router-view>
</div>
</div>
</template>
此处可以看到在home页面中也有路由的嵌套，当点击home中的message导航时，就会将message组件的内容渲染出来
- message.vue
<template>
<div>
<ul>
<li v-for="message in messages" :key="message.id">
<router-link :to="`/home/message/detail/${message.id}`">{{message.title}}</router-link>
</li>
</ul>
<router-view></router-view>
</div>
</template>
<script>
export default {
data () {
return {
messages: []
}
},
mounted () {
setTimeout(() => {
const temp = [
{ id: 1, title: 'message' },
{ id: 2, title: 'message' },
{ id: 3, title: 'message' },
{ id: 4, title: 'message' }
]
this.messages = temp
}, 500)
}
}
</script>
当点击message时就会将vue实例中的messages赋值，然后绑定到页面中。
其中当点击循环出来的title时还会再次触发路由，此时将该条数据的ID传给detail，然后把detail组件放在下边渲染出来。
当detail组件初始化的时候就应该去获取路由参数，然后根据参数中的值去请求后台拿到相应的数据，然后在实现绑定渲染的效果。但这个实例中没有与后台交互，因此在初始化拿到数据后就自动创建一个模拟数据（忘了用插件了）。
- detail.vue
<template>
<div>
<ul>
<li>id: {{$route.params.id}}</li>
<li>title: {{detail.title}}</li>
<li>content: {{detail.content}}</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
detail: {}
}
},
methods: {
getDetail (id) {
this.detail = {id: id, title: 'message' + id, content: 'message content'}
}
},
mounted () {
const id = this.$route.params.id
this.getDetail(id)
},
watch: {
$route: function () {
this.getDetail(this.$route.params.id)
}
}
}
</script>
这里添加了一个监视器，用来监听路由上的ID值，每当有变化就改变data中的数据，重新获取当前值。
router-view
另外一种方式就是通过标签传值，当message组件被渲染时代表其通过router-view标签，此时可以在标签上添加参数来传值，而被渲染的组件内部只需要通过props来获取即可。
// father
<router-view msg="abc"></router-view>
// son
props: {
msg: String
},
总结
vue-router作为vue的官方库应该是很强的，只不过目前接触的比较少，只能稍微明白怎么用。目前明白的就是有一个路由导航，当触发路由后将导航匹配到的组件通过路由标签渲染出来。有关路由取值目前还没总结，这也是一个比较重要的知识。这次的传值是通过路由 ：id 直接配置的，相当于一个占位符，要想进入该页面，在触发时就要把id传进去。
