vue全栈-路由vue-router

什么是前端路由？

路由是根据不同的URL地址展示不同的内容和页面

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

什么时候使用前端路由？

在单页面应用，大部分页面结构不变，只改变部分内容的使用

前端路由的优点和缺点

优点：

👌 用户体验好，不需要每次都从服务器全部获取，快速展现给用户（就是虽然表面上看有10个页面，其实只是一个页面，我们不需要重新在服务器拉取js之类的）

缺点：

😘 不利于seo

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

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

vue-router细节介绍

vue-router是用来构建SPA的关键

路由跳转用router-link或者rhis.$router.push({path:”}),当然编程式路由不仅仅只是一种

<router-view></router-view>，是组件的渲染区域

注意：路由实际上是对浏览器history对象进行了封装，有前进，回退等

动态路由匹配

✔ 什么是动态路由？

✔ 完成一个动态路由

1. src下新建一个router目录，并且router目录下建立index.js文件，另在src下根据页面路径去写页面组件

import Vue from 'vue'
import vueRouter from 'vue-router'

import GoodList from '../pages/GoodList'
import GoodDetail from '@/pages/GoodDetail'

Vue.use(vueRouter)//这个一定不能忘

//创建路由表
const routes = [
    {
      path: '/goods/:goodsId',
      name: 'GoodList',
      component: GoodList
    },
    {
        path: '/goods/:goodsId/user/:name',
        name: 'GoodDetail',
        component: GoodDetail
    }
]
//创建router示例
const router=new vueRouter ({
  //路由表
  routes, // 必写的
  //路由的使用模式   #/home(hash)   /home(h5 history)
  mode: 'history',
  //进行路由模块划分
  modules: {}
})

export default router

注意：@对应的是src是默认就有的

2. main.js主入口文件注册

//引入路由
import router from './router/index.js'

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

注意：router要全小写

3.在对应的路由组件里写上

<span>{{ $route.params.goodsId }}</span>//GoodList

//GoodDetail
<p>{{ $route.params.goodsId }}</p>
<p>{{ $route.params.name }}</p>

嵌套路由

✔ 什么是嵌套路由？

路由嵌套路由

应用场景：打开一个用户信息页面，有一个菜单，可以切换

✔ 例子

🤦‍♀️1.路由配置（router下的index.js）

import Vue from 'vue'
import vueRouter from 'vue-router'

import GoodList from '../pages/GoodList'
import Title from '@/pages/Title'
import Image from '@/pages/Image'

Vue.use(vueRouter)//这个一定不能忘

//创建路由表
const routes = [
    {
      path: '/goods/',
      name: 'GoodList',
      component: GoodList,
      children: [
          {
            path: 'title',//不能加/
            name: 'Title',
            component: Title
          },
          {
            path: 'image',//不能加/
            name: 'Image',
            component: Image
          }
      ]
    }
]
//创建router示例
const router=new vueRouter ({
  //路由表
  routes, // 必写的
  //路由的使用模式   #/home(hash)   /home(h5 history)
  mode: 'history',
  //进行路由模块划分
  modules: {}
})

export default router

🤦‍♀️2.组件书写

GoodList.vue

<template>
  <div class="goodList">
    我是购物车页面
    <router-link to="/goods/title">显示商品标题</router-link>
    <router-link to="/goods/image">显示商品图片</router-link>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

注意：to一定要记得把goods带上，以此类推别的！！！！路由要写全！！！

Title.vue

<template>
  <div class="title">
    这里是商品标题的子组件
  </div>
</template>

Image.vue

<template>
  <div class="image">
    这里是商品图片的子组件
  </div>
</template>

🤦‍♀️3.效果

编程式路由

✔ 什么是编程式路由？

就是指通过js的形式来实现页面跳转

$router.push(“name”)

$router.push({path:”name”})

$router.push({path:”name?a=2″})或者$router.push({path:”name”,query:{a:2}})

$router.go(1)

✔ 实现步骤

🌹1.先在router下加一个路由，当然组件要引入，也要建立Cart组件

import Cart from '@/pages/Cart'
{
        path: '/cart',
        name: Cart,
        component: Cart
}

🌹2.对应的要在GoodList.vue写跳转方法

<template>
  <div class="goodList">
    我是购物车页面
    <router-link to="/goods/title">显示商品标题</router-link>
    <router-link to="/goods/image">显示商品图片</router-link>
    <router-link to="/cart">购物车</router-link>
    <button @click="goCart">跳转到购物车</button>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      
    }
  },
  methods: {
    goCart(){
      // this.$router.push('/cart')
      this.$router.push({ path: '/cart?goodsId=123'})//注意这种形式用query接参
    }
  },
}
</script>

🌹3.Cart.vue里接参

<template>
  <div class="title">
    购物车
    <span>{{ $route.query.goodsId }}</span>
  </div>
</template>

🌹4.效果

命名路由和命名视图

✔ 什么是命名路由和命名视图？

给路由定义不同的名字，根据名字进行匹配

给不同的router-view定义名字，通过名字进行对应组件的渲染

✔ 代码演示

🐱‍🏍命名路由

🍪🍪1.给路由起个名字

{//不带参数的
        path: '/cart',
        name: 'Cart',//命名
        component: Cart
 },
{//带参数的
        path: '/cart/:cardId',
        name: 'Cart',
        component: Cart
}

🍪🍪2.在组件里使用

<router-link :to="{ name: 'Cart' }">购物车</router-link>//不带参数的
<router-link :to="{ name: 'Cart',params:{ cardId:123 } }">购物车</router-link>//带参数的

注意：

to后面如果是个Object对象的话一定要变为v-bind:to或者:to,因为只有这样他才会对Object内容进行运算，否则会在地址栏原样输出

params是路由参数，query是页面跳转参数

🍪🍪3.效果

效果为带参数版本，看url地址

🐱‍🏍命名视图

了解就好，基本不用

🍪🍪1.给App.vue的router-view加name值

<template>
  <div id="app">
      <!-- 路由的展示区域 -->
      <router-view></router-view> 
      <router-view name="title"></router-view> 
      <router-view name="image"></router-view> 
  </div>
</template>

🍪🍪2.路由配置修改

{
      path: '/goods/',
      name: 'GoodList',
      components: {//修改的地方在这里，命名视图配置
          default: GoodList,
          title: Title,
          image: Image
      },
      children: [
          {
            path: 'title',//不能加/
            name: 'Title',
            component: Title
          },
          {
            path: 'image',//不能加/
            name: 'Image',
            component: Image
          }
      ]
    }

🍪🍪3.效果

其他拓展

除了以上这些，路由还有meta权限判断，路由导航守卫等，博客里都有，在vue板块下