什么是路由？

路由是 路径和组件的映射关系

  • 优点是：
    单页面应用
    整体不刷新页面，用户体验更好
    数据传递容易，开发效率高

使用路由的几个步骤是？

1.引入vue文件 （import vue from ‘vue’）
2.导入路由 vue router (import VueRouter from ‘vue-router’)
3.使用vue router插件，把它注册到全局 vue.use (Vue.use(VueRouter))
4.创建路由规则数组 (const routes = [···])
5.创建路由规则对象-传入规则，也就是传入第四步 (new VueRouter({···}))
6.然后就是默认导出 （export default router）
7.再到main.js里面默认导入 (import ····)
8.挂载到vue实例上面去 （new Vue({ router, render((h)=>h(app)) }).$mount(’#app’)）

路由配置

// 引入路由组件
import VueRouter from 'vue-router';

import Vue from 'vue';

// 使用路由插件
Vue.use(VueRouter);

// 路由的普通加载
// import about from '../components/about';
// import self from '../components/self';

// 创建路由实例
const router = new VueRouter({
    // 配置路由模式
    /* 
      hash: 哈希模式匹配
    */
    mode: 'hash',

    routes: [
        {
            path: '', // 路由路径 --- 不添加 则默认表示'/'路由
            name: 'home', // 路由名称
            redirect: '/about', // 设置  路由重定向
        },
        {
            path: '/about',
            name: 'about',
            // 路由懒加载 --- 按需加载路由
            // 优化前端性能 ， 避免在加载vue时因为加载全部路由导致卡顿
            component: () => import('../components/about')
        }, {
            path: '/self',
            name: 'self',
            component: () => import('../components/self')
        }
    ],

    base: '/app' //访问基路径
})
export default router;
/* 
    路由配置

    new VueRouter({
        mode: '' --- 设置路由模式  
        - hash 路由模式 ， 路径上带有'#' , 注意此种路由模式下路由不能使用
            锚点，'#' 后面的路径为前端路由路径，不会包含到请求中，无需后端调整

        - history 路由模式 ， 路径是一个完美的路径，但是当在路由中请求后端时，
            后端如果没有配置对应路由会导致找不到资源。(前端路由也参与了请求)
   
        base: '/app' //访问基路径

        routes: [
            {
                 path: '', // 路由路径 --- 不添加 则默认表示'/'路由
                  name: 'home', // 路由名称
                 redirect: '/about', // 设置  路由重定向
            },

            // 一级路由
            {
                 path: '/about',
                 name: 'about',
                  // 路由懒加载 --- 按需加载路由
                   // 优化前端性能 ， 避免在加载vue时因为加载全部路由导致卡顿
                 component: () => import('../components/about')
             }, {
                 path: '/self',
                 name: 'self',
                 component: () => import('../components/self')

                 
                 children:[{ --- // 用于配置当前路由的子路由
                  // 这里面是二级路由 -- 同理还用三级路由···
                     path: '/self/add',
                     name: 'add'
                     ····
                 },{···},{···}]
            }
         ],

        })
*/

< router-link >

路由链接组件，用于触发跳转到相应的路由页面

<router-link
      tag="button"
      active-class="active"
      :to="{
        path: '/about',
      }"
      >标签1</router-link
    >

标签属性

  • 默认情况下，router-link是一个链接a标签
    通过指定tag标签属性可以设置routerlink展现的最终html标签
  • active-class:标签属性表示当此路由跳转被跳转时，该标签展示的效果
  • to： 标签属性，触发此标签时跳转的路由路径

基础写法
to=’/path’,

进阶写法 (注意绑定to，因为需要将to属性的值指定为一个js的配置对象)
   :to ='{
       path: '/path',
       query:{
           prop: value // ------ 配置跳转路由是携带的query参数
       },
       params:{
           prop: value // ------ 配置跳转路由是携带params参数
       }
   }'
  • replace:标签属性表示该路由跳转不会留下历史记录
  • append: 标签属性作用是可以在跳转路由上添加跳转的路径
    如 从a路由跳转至b路由， 不添加append的情况下，路由显示的
    是 ‘/b’ ， 添加append则路由展示 ‘/a/b’
  • event ： 标签属性用于设置触发路由导航的事件
    如 ‘click’ , ‘mouseover’ ····

< router-view >

路由视图组件， 用于展示当前组件路由跳转后展示的视图

<div id="view">
      <!--
           <router-view> 路由视图组件， 用于展示当前组件路由跳转后展示的视图
               name： 
                标签属性， 设置该路由视图渲染的指定路由
      -->

      <router-view />
    </div>