Vue-route | 脱坑详解

Vue-route

基本路由

相关API说明

1. VueRouter(): 用于创建路由器的构建函数

new VueRouter({ 

// 多个配置项 

}) 

2. 路由配置

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

3. 注册路由器

import router from './router' 

new Vue({ 
	router 
}) 

4. 使用路由组件标签

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

路由组件

Home.vue

About.vue

应用组件

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

路由器模块：src/router/index.js

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

注册路由器：main.js

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

// 创建 vue 配置路由器 
new Vue({ 
    el: '#app', 
    router, 
    render: h => h(app) 
})

嵌套路由

子路由组件

New.vue

Message.vue

配置嵌套路由：route.js

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

路由链接：Home.vue

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

向路由链接传递数据

方式一：路由路径携带参数

1. 配置路由

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

2. 路由路径

<router-link :to="'/home/message/mdetail/'+m.id">{{m.title}}</router-link> 

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

this.$route.params.id

方式二：<router-view>属性携带数据

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

缓存路由组件

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

实现：

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

编程时路由导航

1. this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)

2. this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)

3. this.$router.back(): 请求(返回)上一个记录路由

4. this.$router.go(-1): 请求(返回)上一个记录路由

5. this.$router.go(1): 请求下一个记录路由​