vue---router路由分发

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页面的配置

1、回顾

2、课程

2.1 评分

点击列表页面进入产品的详情页面，需要考虑的是 详情页面有自己的头部，自己的内容以及自己的底部

2.2 设计产品的详情

设计如下

vue中可以使用 **命名视图
** 解决这类问题

<router-view></router-view>

<router-view></router-view> <router-view name="footer"></router-view>

2.2.1 改造路由文件 router.js

2.2.2 改造App.vue

2.2.3 router.js中添加一个新的路由 /detail

1、 先构建一个views/Detail.vue

2、 修改 router.js

3、浏览器访问 http://localhost:8080/#/detail 可看到详情页面

2.2.4 构建详情页面布局

在App.vue中添加如下的样式

2.3 列表进入详情

vue中页面的跳转有两种形式： 声明式跳转、编程式跳转

2.3.1 声明式跳转 --- 标签形式

<router-link to="/kind"></router-link>
本案例中，需要从列表跳转到详情，依据的是产品的 id 属性，遇到这种路由的声明式跳转需要传递参数，并且是变量的话，就需要用到命名路由（默认已经实现，router.js中的每个路由都有一个name属性）

1、修改router.js中关于详情的路由

2、Prolist.vue中跳转的设置

浏览器中测试，可以跳转

3、详情页面获取数据

2.3.2 编程式跳转 --- js形式

this.$router.push('/kind') // string

this.$router.push({path: '/kind'}) // Object ---- 不能使用 /detail/1243

this.$router.push({name: 'kind', params: {id: id}}) // Object ---- 能使用 /detail/1243

如果想用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

---------------------------------------------------------------------------------------------文章来自吴大勋（大勋说）---------------------------------------------------------------------------------------------