Vue路由

vue-router 路由 https://router.vuejs.org/zh/

我们要实现单页面应用，所以需要学习路由。

跳转路由的几种方式：

1、声明式：

    1) 根据路由路径（/home/sort/detail）跳转 点击查看子页面    
     2) 根据路由名称（detail）跳转 点击查看子页面
            :to=""  可以实现绑定动态的 路由 和 参数

2、编程式：

   1） this.$router.push({path: '/home/sort/detail',query:{id: 'abc'}})
   2） this.$router.push({name: 'detail',params:{id: 'abc'}})

备注： params 和 query 传参的区别：
1、params传参时 参数不会出现在url的路径上面， 但是刷新页面时param里面的数据会消失
2、query传参时 参数出现在url的路径上面， 刷新页面时query里面的数据不变

传统的网页：地址各不一样
超市
https://pro.m.jd.com/mall/active/2hqsQcyM5bEUVSStkN3BwrBHqVLd/index.html
牛奶
https://pro.m.jd.com/mall/active/3nxcGU8mCsjXN5MjTGQ1AX2LbdfF/index.html

单页面应用

http://ustbhuangyi.com/music/#/recommend

spa的实现

页面只有一个，你要根据用户的地址栏中信息去展示不同的内容给用户，怎么办？

SPA single-page-application 单页面应用 一个程序只有一个页面

优点：提供流畅的用户体验，避免了不必要的跳转和重新渲染，服务器压力小。

缺点：不利于seo，初次加载页面更耗时，历史管理需要编程实现

spa的实现

页面只有一个，但是你要展示不同的内容给用户，怎么办？

两种方法：

1> 动态路由

2> 路由

• 动态组件的功能有限（例如：不能传参），我们可以使用另外一种方法-路由

使用路由的步骤：

第一步：准备好组件

image

第二步：router-link和router-view准备好视图

image

router-link最后会编译成a标签，如下：

image

• 注：可以为router-link标签默认渲染为a标签，我们可以给它指定tag属性指定最后渲染为什么标签

image

image

第三步：实例化 路由对象

配置路由，指定路由和组件之间的关系

image

第四步：在vue实例中配置router

image

嵌套路由

在实际开发中的界面，通常有多层嵌套的组件的组合而成，如：设置项下面还有设置的子项

image

• 实现

1>设置视图 在子组件中再次使用router-link和router-view

2>修改路由配置 设置相关路由的children项

• 实例

第一步：准备好子组件

image

第二步：设置set的组件视图

因为这两个子组件将会嵌套在set视图中，所以我们需要去修改set组件的视图，：加上router-link和router-view

image

第三步：修改路由配置

image

动态路由 - 传递参数

例如：

http://ustbhuangyi.com/music/#/recommend/6689258475

http://ustbhuangyi.com/music/#/recommend/6570024680

上面两个地址实际共用一个页面，但由于传递的参数不同，则显示内容也不同。这种带参数的路由，就是动态路由。

• 实现

可以在vue-router的路由路径中使用动态路径参数

动态路径参数 以冒号开头

{path:'/detail/:id',component:组件}

当匹配到一个路由时，参数值会被设置到this.$route.params.id,可以在每个组件内使用。

• 示例：

在上面的基础上再加一个显示商品详情detail的组件，它的功能是根据不同的商品编号显示不同的商品详情，再显示出来

第一步：创建一个detail组件

image

image

第二步：修改路由配置

image

编程式路由--实现页面跳转

对比理解:页面的跳转有两种方法：

1> a标签可以设置href之后，实现页面跳转

2>另外，还有一种方法去实现页面跳转：写代码

window.location = ''

• 编程式路由：就想通过代码设置localtion一样，去进行页面跳转

router.push({path:'index'})

image

点击上方按钮，直接打开商品编号为100的详情页

image

注：这里的参数是route.params.num

声明式	编程式
	router.push

this.$router.replace()，不会像history栈里添加新的记录

声明式	编程式
	router.replace

this.$router.go(-1) 向前一步

可以通过this.route访问当前的路由

this.$router.push('/index') //字符串路径  this.$router.push('index')

this.$router.push({path:'/index'})  //对象

this.$router.push({name:'index'})   //对象  name

this.$router.push({name:'index',params:{num:100})  //通过this.$route.params.num获取

this.$router.push({name:'index',query:{num:100})   //通过this.$route.query.num 获取

命名视图

重定向：当我们再地址栏中访问一个a网址时，会跳转到b网址

直接通过路由设置来完成

image