1、回顾 2、课程 2.1 评分 2.2 设计产品的详情 2.2.1 改造路由文件 router.js 2.2.2 改造App.vue 2.2.3 router.js中添加一个新的路由 /detail 2.2.4 构建详情页面布局 2.3 列表进入详情 2.3.1 声明式跳转 --- 标签形式 2.3.2 编程式跳转 --- js形式 2.4 使用嵌套路由实现登录与未登录状态 2.5 别名 + 路由的模式 2.6 路由懒加载 2.7 404页面的配置

2.1 评分

如果想用path形式,使用方法如下
4a15d122ed624378964d053671a7a1e2.png

2.4 使用嵌套路由实现登录与未登录状态

先创建 components/user/NoLogin.vue、 components/user/Login.vue
6b34c248479efc35732183ed474e4197.png

User.vue组件中告诉这两个组件在哪里显示
<router-view></router-view>
cf18559a28c67a46dddf801da46c9a90.png

router.js中配置嵌套的路由规则
a2147afa4708b504fe3c75e9c140c1f0.png
84a579c360d47f5692d8d56c60dbb6e3.png

浏览器分别输入 http://localhost:8080/#/user/login 和 http://localhost:8080/#/user/nologin

?? 当每次进入个人中心页面时,需要有一个判断条件,如果是已经登陆了,就跳转到/user/login,反之跳转到 /user/nologin

使用 重定向 解决问题 ---- 先要把User.vue中的 mounted 的js注释掉
e13e62ce0249b6d725a2e5d5adf47f24.png

2.5 别名 + 路由的模式

路由的模式

默认是hash值 带有 #
04b0bd6907248c05c6075eb4c1ccb8dd.png

模式为history,以前需要后端支持,现在默认支持
现在的脚手架是 @vue/cli 以前的 vue-cli

cnpm / npm i vue-cli -g
vue init webpack myapp
cd myapp
cnpm /npm i
cnpm run dev

2.6 路由懒加载

2.7 404页面的配置

src/components/NotFoundComponent.vue
修改src/router.js
d70c0e7b7c4f7f45faf85294674e5f61.png

mint-ui

---------------------------------------------------------------------------------------------文章来自吴大勋(大勋说)---------------------------------------------------------------------------------------------