vue-day06
1-路由
1.1-路由的概念
- 作用: 维护页面访问路径和对应页面组件之间的关系
1.2-路由的安装
npm i vue-router -S
1.3-路由的基本使用流程
-
导入
// 1-导入路由模块 import Vue from 'vue'; import Router from 'vue-router'; -
注册插件
// 2-注册插件 Vue.use(Router); -
定义路由规则数组
// 导入页面组件 import Home from '../pages/Home'; import Login from '../pages/Login'; import Reg from '../pages/Reg'; // 3-定义路由规则数据 const routes=[ { // 页面访问路径 path:'/home', // 页面组件对象 component: Home }, { path:'/login', component:Login }, { path:'/reg', component:Reg } ]; -
根据路由规则数据创建路由对象
// 4-创建路由对象 const router=new Router({ routes }); export default router; -
将路由对象挂载到
vue实例上// 导入路由对象 import router from './router' new Vue({ el: '#app', template: '<App/>', // 挂载路由对象 router }) -
在根组件中通过
router-view添加路由占位符<!-- 路由占位符 路由地址匹配到的组件的渲染位置 --> <router-view /> -
在根组件中通过
router-link创建路由导航链接- tag: 指定渲染出来的标签, 默认会渲染
a标签 - exact: 启用路由严格匹配模式
<!-- 路由导航链接 --> <router-link to="/home">首页</router-link> <router-link to="/login">登录</router-link> <router-link to="/reg">注册</router-link> - tag: 指定渲染出来的标签, 默认会渲染
1.4-路由模式
-
vue中有两种路由模式
- history: 页面访问路径中不带
#- 打包之后, 必须放到一个web服务器下, 才能正常的工作
- hash: 页面访问路径中带
#- 打包之后, 可以直接使用文件的方式来运行
// 4-创建路由对象 const router=new Router({ routes, // 切换路由模式: 通过mode属性切换, 可选值: history, hash, 默认值为hash mode:'hash' }); - history: 页面访问路径中不带
1.5-路由导航高亮
-
针对系统提供的一个动态添加的类名
router-link-actvie书写对应的高亮样式即可 -
自定义路由导航链接高亮类名
// 4-创建路由对象 const router=new Router({ routes, // 切换路由模式: 通过mode属性切换, 可选值: history, hash, 默认值为hash mode:'history', // 自定义路由导航链接高亮的类名: 默认值link-active-class linkActiveClass:'active' });
1.6-路由重定向
-
访问
/a的时候, 自动跳转到/b页面// 3-定义路由规则数据 const routes=[ // 路由重定向 { path:'/', redirect:'/home' } ]
1.7-404路由的配置
-
当用户访问了一个不存在的页面, 该路由规则生效, 给用户展示一个默认错误页面
const routes=[ // 配置404路由 { path:'*', component: NotFound } ];
1.8-命名路由
-
给每一条路由规则通过name属性起一个名字
// 3-定义路由规则数据 const routes=[ // 命名路由 { name:'home', // 页面访问路径 path:'/home', // 页面组件对象 component: Home }, { name:'login', path:'/login', component:Login }, { name:'reg', path:'/reg', component:Reg } ]; -
通过路由名称实现页面跳转
<router-link class="btn" :to="{name:'home'}">首页</router-link> <router-link class="btn" :to="{name:'login'}">登录</router-link> <router-link class="btn" :to="{name:'reg'}">注册</router-link>
1.9-编程式导航
- this.$router:
- push(): 实现页面跳转, 只会在页面访问历史中添加一条记录
- replace(): 实现页面跳转, 会覆盖前一次的访问历史
- go(): 可以实现页面前进或者回退
- 正数代表前进
- 负数代表回退
- back(): 实现页面回退
- forward(): 实现页面前进
1.10-路由元信息
-
定义
const routes=[ // 命名路由 { name:'home', // 页面访问路径 path:'/home', // 页面组件对象 component: Home, // 路由元信息 meta:{ title:'网站首页' } } ] -
调用
// 组件中获取路由元信息 this.$route.meta
1.11-命名视图
-
应用场景: 一个页面访问地址如果对多个组件的时候, 可以使用命名视图
-
定义命名视图需要的路由规则
const routes=[ // 命名路由 { name:'home', // 页面访问路径 path:'/home', // 页面组件对象 components: { aside:Aside, default:Home }, // 路由元信息 meta:{ title:'网站首页' } } ]; -
在根组件中插入多个路由占位符
<div id="app"> <div class="left"> <!-- 命名路由占位符 --> <router-view name="aside" /> </div> <div class="right"> <!-- 路由导航链接 --> <router-link class="btn" :to="{name:'home'}">首页</router-link> <router-link class="btn" :to="{name:'login'}">登录</router-link> <router-link class="btn" :to="{name:'reg'}">注册</router-link> <hr /> <!-- 路由占位符 路由地址匹配到的组件的渲染位置 --> <!-- 默认的路由占位符 --> <router-view /> </div> </div>
1.12-动态路由
-
配置动态路由
const routes=[ // 动态路由规则 { name:'goods', path:'/goods/:id', component: Goods, meta:{ title:'商品详情' } } ] -
获取动态路由参数
// 通过this.$route.params获取到的是所有动态路由参数的集合 this.$route.params.id;
1.13-通过查询字符串的方式实现路由传参
-
通过查询字符串传递参数的时候, 无需对路由规则进行改写
-
参数传递
<!--写法1--> <router-link class="btn" to="/login?from=baidu&ip=192.168.1.1">登录</router-link> <!--写法2--> <router-link class="btn" :to="{name:'login',query:{from:'baidu',ip:'192.168.1.1'}}">登录</router-link> -
查询字符串参数的获取: 通过
this.$route.query获取this.$route.query.from; this.$route.query.ip
1.14-路由懒加载
-
作用: 按需加载, 提升项目性能
// 异步加载组件: 组件懒加载 const Home=()=>import('../pages/Home'); const Login=()=>import('../pages/Login'); const Reg=()=>import('../pages/Reg'); const Goods=()=>import('../pages/Goods'); const NotFound=()=>import('../pages/NotFound'); const Aside=()=>import('../components/Aside');
1.15-路由匹配模式
-
vue中 默认执行的是路由模糊匹配: 当页面访问地址中, 包含路由path, 就认为匹配成功 -
启用路由严格匹配模式: 在
router-link路由导航链接上, 添加exact属性即可, 一般只需要对/所在的路由导航链接启用严格匹配<!-- exact: 启用路由严格匹配模式 --> <router-link exact class="btn" to="/">网站首页</router-link>
2-hash路由模式实现原理
-
通过
hashchange事件监听锚点值的改变, 进而使用component动态切换组件App.vue 根组件
<template> <!-- 必须有一个唯一的根标签 --> <div id="app"> <a class="btn" href="#/home">首页</a> <a class="btn" href="#/login">登录</a> <a class="btn" href="#/reg">注册</a> <a class="btn" href="#/goods">商品详情</a> <hr /> <component :is="pageName"></component> </div> </template> <script> // 异步加载页面组件 const home = () => import("./pages/Home"); const login = () => import("./pages/Login"); const reg = () => import("./pages/Reg"); const goods = () => import("./pages/Goods"); export default { // 组件名字 name: "App", // 注册私有组件 components: { home, login, reg, goods }, data() { return { pageName: "home" }; }, created() { const page=location.hash.substr(2); this.pageName=page; // 监听hashchange事件: 当页面锚点发生改变的时候, 会自动触发 window.addEventListener("hashchange", () => { // 1-获取锚点值 const hash=location.hash.substr(2); // 2-更新pageName this.pageName=hash; }); } }; </script> <style> * { padding: 0; margin: 0; } #app { width: 1170px; margin: 20px auto; } .left { width: 200px; } .right { flex: 1; } .btn { display: inline-block; width: 80px; height: 40px; line-height: 40px; text-align: center; background: #eee; text-decoration: none; } /* 路由导航链接高亮类名: router-link-active */ .active { color: #fff; background: #197ebb; } </style>
3-案例
3.1-后台管理系统
-
布局组件
pages/Layout.vue
<template> <div class="layout-container"> <div class="left"> <!-- aside侧边栏 --> <Aside /> </div> <div class="right"> <!-- 头部 --> <Header /> <!-- 主体内容 --> <div class="content"> <!-- 路由占位符 --> <router-view /> </div> <!-- 底部 --> <Footer /> </div> </div> </template> <script> // 导入组件 import Header from "@/components/Header"; import Footer from "@/components/Footer"; import Aside from "@/components/Aside"; export default { // 注册组件 components: { Header, Footer, Aside } }; </script> <style> .layout-container { height: 100%; display: flex; } .left { width: 226px; height: 100%; background: #000; color: #fff; } /* 导航样式 */ .navbar li { height: 50px; line-height: 50px; text-align: center; } .navbar li:hover { background: #0078b9; cursor: pointer; } /* 定义一个导航高亮类名 */ .active { background: #0078b9; cursor: pointer; } .right { flex: 1; height: 100%; background: #eee; display: flex; flex-direction: column; } .content { flex: 1; background: #fff; margin: 10px; padding: 10px; } </style> -
路由文件
router.js
// 1-导入路由模块 import Vue from 'vue'; import VueRouter from 'vue-router'; // 2-注册插件 Vue.use(VueRouter); // 3-配置路由规则数组 const Home=()=>import('./pages/Home'); const Goods=()=>import('./pages/Goods'); const User=()=>import('./pages/User'); const Order=()=>import('./pages/Order'); const Cate=()=>import('./pages/Cate'); const routes=[ // 路由重定向 { path:'/', redirect:'/home' }, { name:'home', path:'/home', component:Home, meta:{ title:'管理中心' } }, { name:'goods', path:'/goods', component:Goods, meta:{ title:'商品管理' } }, { name:'user', path:'/user', component:User, meta:{ title:'会员管理' } }, { name:'order', path:'/order', component:Order, meta:{ title:'订单管理' } }, { name:'cate', path:'/cate', component:Cate, meta:{ title:'商品分类管理' } } ]; // 4-创建路由对象 const router=new VueRouter({ routes, // 路由规则数组 mode:'hash', // 设置路由模式 linkActiveClass:'active' // 自定义路由导航高亮类名 }); // 导出路由对象 export default router; -
项目入口文件
/main.js
// 导入vue import Vue from 'vue' // 导入根组件 import App from './App' // 导入路由对象 import router from './router' new Vue({ // 指定组件编译之后的挂载节点 el: '#app', // 注册私有组件 components: { App }, // 模板 template: '<App/>', // 挂载路由对象 router })
1420
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
