学习Vue---3.Vue-router

一、相关API说明

编写使用路由的3步：

1. 定义路由组件
2. 注册路由
3. 使用路由
   1. <router-link>
   2. <router-view>

1.注册路由器（在 main.js）

import Vue from 'vue'
import router from './router'
// 创建vue 配置路由器
new Vue({ //配置对象的属性名都是一些确定的名称，不能随便修改
    el: '#app',
    router,
    render: h => h(app)
})

2.路由器配置：（在 router 目录下 index.js）

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

3.路由配置：（在 router 目录下 index.js）

const routes = [
  {
    path: '/home',
    component: home,
    // 嵌套路由
    children: [
        { // path最左侧的/永远代表根路由
            path: '/home/news',
            component: News
        },
        {
            path: 'message', //简化写法
            component: Message
        }
    ]
  },
  {
    // 一般路由
    path: 'about',
    component: About
  },
  {
    // 自动跳转路由
    path: '/',
    redirect: '/about'
  }
]　

4.VueRouter()：用于创建路由器的构建函数

const router = new VueRouter({
  mode: "history", // 模式
  base: process.env.BASE_URL,
  routes
});

export default router;　

5.使用路由组件标签

<router-link>：用来生成路由链接
<router-link to="/home/news">News</router-link>

<router-view>：用来显示当前路由组件界面
<router-view></router-view>

6.优化路由器配置（可选）

linkActiveClass：'active',//指定选择的路由链接的class

二、向路由组件传递数据

方式1: 路由路径携带参数(param/query)

1) 配置路由

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

2) 路由路径

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

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

this.$route.params.id

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

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

三、缓存路由组件对象

1) 默认情况下，被切换的路由组件对象会死亡释放，再次回来时是重新创建的（原来的数据就没有了）
2) 如果可以缓存路由组件对象（router-view管理的路由组件，即<router-link>包着的组件），可以提高用户体验

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

四、两种模式的区别

1.hash模式

相关API

2.history模式

相关API

3.区别

五、router与route的区别

 

 

 

 

参考链接：

【1】vue-router两种模式的区别 - cecelia - 博客园

【2】Woc12138/Vue-study: Vue学习笔记

【3】Vue 全家桶 | Woc12138