前端Vue2-Day60

Vue路由：vue-router(实现SPA应用) 

vue-router3 => vue2  vue-router4 => vue3

SPA应用：

① 单页web应用。

② 整个应用只有一个完整的页面。

③ 点击页面中的导航链接不会刷新页面，只会做页面的局部更新。

④ 数据需要通过ajax请求获取。

 

路由：即k-v映射关系，key为路径，value为function或component

路由分类：

① 后端路由：

• 理解：value为function，用于处理客户端提交的请求。
• 工作工程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据。

② 前端路由：

• 理解：value为component，用于展示页面内容。
• 工作工程：当浏览器路径改变时，对应组件就会展示。

 

基本使用：

① 安装vue-router：npm i vue-router@3

② 应用插件：Vue.use(VueRouter)

③ 创建router文件夹，配置index.js为router配置项

import VueRouter from 'vue-router'

// 引入所需组件
import component1 from '...'
import component2 from '...'

// 创建router实例对象
const router = new VueRouter({
    routes: [
        {
            path: '/component1',
            component: component1
        },
        {
            path: '/component2',
            component: component2
        }
    ]
})
export default router

④ 实现切换：active-class可配置样式切换即高亮显示

<router-link to="路由path"></router-link>

⑤ 指定展示位置：router-view

<router-view></router-view>

 

注意点：

• 路由组件通常存放在pages文件夹下，一般组件放在components文件夹下。
• 通过切换，不在页面显示的组件。默认已经被销毁，当需要使用时又会被挂载。
• 每个组件都有自己的$route属性，里面存放着自己的路由信息(path)。
• 整个应用只有一个router，可以通过组件的$router属性获取到。

 

嵌套路由(多级路由)：路由下配置子路由 只有一级路由path需要加 /，之后嵌套路由无需加 / ！

① 配置路由规则，使用children配置项：

export default new VueRouter({
    routes: [
        {
            path: 'father',
            component: Father,
            children: [{
　　　　　　　　　 // 路径前不需要加/
                path: 'son1',
                components: Son1
            }, {
                path: 'son2',
                component: Son2
            }]
        }
    ]
})

 

② 跳转：

<router-link to="/father/son">Son</router-link>

 

路由传参：query传参

① 传递参数：利用数据绑定to属性进行路由内的字符串解析(模板字符串or对象)

• 字符串写法：<router-link :to="`/xxx?data1=${data1}&data2=${data2}`"></router-link>
• 对象写法：<router-link :to="{ path:'xxx', query: {data1,data2}}"></router-link>

② 接收参数：$route.query.xxx

 

命名路由：简化路由跳转

① 配置命名：

export default new VueResource({
    routes: [{
        path: '/grandFather',
        component: grandFather,
        children: [{
            path: 'father',
            component: Father,
            children: [{
                name: 'son',
                path: 'son',
                component: Son
            }]
        }]
    }]
})

 

 

② 简化跳转：直接数据绑定to并以对象形式配置name即可，无需再配置path。

// 简化前
<router-link :to="{path:'grandFather/father/son'}"></router-link>
// 简化后
<router-link :to="{name:'son'}"></router-link>