Vue路由基础

基础知识

路由就是根据不同的url地址展示不同的内容或页面。

前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，之前都是通过服务端根据url的不同返回不同的页面实现的。

前端路由的优点：

用户体验好，不需要每次都从服务器上全部获取，快速展现给用户。

缺点：

不利于SEO，有可能只有第一张页面能被收录

使用浏览器的前进，后退键的时候会重新发送群请求，没有合理的使用缓存。

单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置。

vue-router用来构建SPA

<router-link></router-link>路由跳转标签或者this.$router.push({path:''})

<router-view></router-view>对组件进行渲染

动态配置路由

首先新建一个存放组件的文件夹views:

<template>
    <div>
        这是购物车页面
    </div>
</template>
<script>
    export default{
        data() {
            return {
                msg:'Hello World'
            }
        }
    }
</script>

然后修改router/index.js的内容：

import Vue from 'vue'
import Router from 'vue-router'
import GoodsList from './../views/GoodsList'
import Title from '@/views/Title'
import Image from '@/views/Image'
import Cart from '@/views/Cart'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/goods',
      name: 'GoodsList',
      component: GoodsList
    }
  ]
})

其中，@代表的是src位置，值webpack.base.conf.js中有设置：

在浏览器中输入http://localhost:8083/#/goods即可显示。

模拟动态路由的实现：

修改index.js的routes部分如下：

routes: [
    {
      path: '/goods/:goodsList',
      name: 'GoodsList',
      component: GoodsList,
    }
  ]

在GoodList.vue中加入

<span>{{$route.params.goodsList}}</span>

运行后，在地址栏输入http://localhost:8083/#/goods/admin1，可以看见admin显示出来了。

嵌套路由

在GoodsList的routes下面添加children属性，即为其嵌套的子组件，并向children中天骄几个路由：

export default new Router({
  routes: [
    {
      path: '/goods',
      name: 'GoodsList',
      component: GoodsList,
      children:[
        {
          path:'title',
          name:'title',
          component:Title
        },
        {
          path:'img',
          name:'img',
          component:Image
        }
      ]
    },{
      path:'/cart',
      name:'cart',
      component:Cart
    }
  ]
})

在GoodsList.vue中，进行如下的修改：

<template>
    <div>
        这是购物车页面
        <span>{{$route.params.goodsId}}</span>
        <span>{{$route.params.name}}</span>
        <router-link to="/goods/title">显示商品标题</router-link>
        <router-link to="/goods/img">显示商品图片</router-link>
        <div>
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
    export default{
        data() {
            return {
                msg:'Hello World'
            }
        } 
</script>

打开http://localhost:8083/#/goods，可以看见“显示商品标题”和“显示商品图片”两个链接按钮，点击后下方就能够显示出对应的组件的内容。并且上面的链接也随之发生了变化。

路由式编程

编程式路由就是通过Js来实现页面的跳转，常见的形式：

$router.push("name")
$router.push({path:"name"})
$router.push({path:"name?a=123"})或者$router.push({path:"name",query:{a:123}})
$router.go(1)

在index.js的组件中增加一个名为cart的组件：

{
      path:'/cart',
      name:'cart',
      component:Cart
}

并将GoodsList.vue修改为如下：

<template>
    <div>
        这是购物车页面
        <span>{{$route.params.goodsId}}</span>
        <span>{{$route.params.name}}</span>
        <router-link to="/goods/title">显示商品标题</router-link>
        <router-link to="/goods/img">显示商品图片</router-link>
        <div>
            <router-view></router-view>
        </div>
        <router-link to="/cart">跳转到购物车页面</router-link>
        <button @click="jump">button  - 跳转到购物车页面</button>
    </div>
</template>
<script>
    export default{
        data() {
            return {
                msg:'Hello World'
            }
        },methods:{
            jump(){
                this.$router.push({path:'/cart?goodsId=123'});
                //this.$router.go(-2);
            }
        }
    }
</script>

对应的Cart.vue代码如下：

<template>
    <div>
        这是购物车页面
        <span>{{$route.query.goodsId}}</span>
    </div>
</template>
<script>
    export default{
        data() {
            return {
                msg:'Hello World'
            }
        }
    }
</script>

这里获取参数用的是$route.query.goosId,和动态路由中用到的$route.params不一样。