v-router的初步认识与学习

一般路由

1，说明

• 官方提供的用来实现SPA的vue插件
• github: https://github.com/vuejs/vue-router
• 中文文档: http://router.vuejs.org/zh-cn/
• 下载: npm install vue-router --save

2，相关API说明

• 用于创建路由器的构建函数

VueRouter(): 
new VueRouter({
// 多个配置项
})

•  路由配置

routes: [
{ // 一般路由
    path: '/about', 
    component: About
},
{ // 自动跳转路由
    path: '/', 
    redirect: '/about' 
}]

• 注册路由器

import router from './router' 
new Vue({
    router
})

• 使用路由组件标签

<router-link>: 用来生成路由链接
<router-link to="/xxx">Go to XXX</router-link>
<router-view>: 用来显示当前路由组件界面
<router-view></router-view>

3，路由组件

如：Home.vue ,About.vue

4，应用组件

<div>
<!--路由链接-->
    <router-link to="/about">About</router-link>
    <router-link to="/home">Home</router-link>
<!--用于渲染当前路由组件-->
    <router-view></router-view>
</div>

4，路由器模块: src/router/index.js

export default new VueRouter({
routes: [
{
    path: '/', 
    redirect: '/about'
},
{
    path: '/about', 
    component: About
},
{
    path: '/home', 
    component: Home
}]
})

5，注册路由器: main.js

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

new Vue({   //配置对象的属性名都是一些确定的名称，不能随便修改
  el: '#app',
  components: { App },
  template: '<App/>',
  router
})

总结: 编写使用路由的 3 步
1) 定义路由组件
2) 注册路由
3) 使用路由
<router-link>
<router-view>

 

嵌套路由

1，子路由组件

News.vue

Message.vue

2，配置嵌套路由：router.js

path: '/home', 
component: home, 
children: [
    {
        path: 'news', 
        component: News
    },
    {
        path: 'message',
        component: Message
    }
]

3，路由链接：Home.vue

<router-link to="/home/news">News</router-link>
<router-link to="/home/message">Message</router-link>
<router-view></route-view>

 

向路由组件传递数据

方式1：路由路径携带参数（param/query）

1，配置路由

:id占位符

children: [
{
    path: 'mdetail/:id', 
    component: MessageDetail
}]

2，路由路径

<router-link :to="`/home/message/messagedetail/${message.id}`">{{message.title}}</router-link>

3，路由组件中读取请求参数

this.$route.params.id

方式 2: <router-view>属性携带数据

<router-view :msg="msg"></router-view>

 

缓存路由组件对象

默认情况下，被切换的路由组件对象会死亡释放，再次回来时是重新创建的。如果可以缓存路由组件对象，可以提高用户体验

编码实现:

<keep-alive>
    <router-view></router-view>
</keep-alive>

编程式路由导航

相关API

1) this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
2) this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
3) this.$router.back(): 请求(返回)上一个记录路由
4) this.$router.go(-1): 请求(返回)上一个记录路由
5) this.$router.go(1): 请求下一个记录路由