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形式,使用方法如下
2.4 使用嵌套路由实现登录与未登录状态
先创建 components/user/NoLogin.vue、 components/user/Login.vue
User.vue组件中告诉这两个组件在哪里显示
<router-view></router-view>
router.js中配置嵌套的路由规则
浏览器分别输入 http://localhost:8080/#/user/login 和 http://localhost:8080/#/user/nologin
?? 当每次进入个人中心页面时,需要有一个判断条件,如果是已经登陆了,就跳转到/user/login,反之跳转到 /user/nologin
使用
重定向
解决问题 ---- 先要把User.vue中的 mounted 的js注释掉
2.5 别名 + 路由的模式
路由的模式
默认是hash值 带有 #
模式为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
mint-ui
---------------------------------------------------------------------------------------------文章来自吴大勋(
大勋说)---------------------------------------------------------------------------------------------