vue路由（vue路由传参的三种方式）

本篇文章给大家谈谈vue路由，以及vue路由传参的三种方式对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、vue两种路由模式及原理
• 2、Vue路由的使用
• 3、vue动态路由

vue两种路由模式及原理

vue-router默认的是hash模式.

hash模式,是指url尾巴后的#号以及后面吵帆的字符.hash也被称为锚点,本身是用来做页嫌核面定位的.

hash虽然出现在url中,但不会被包括在http请求中,对后端完全没有影响,因此改变hash值不会重新加载页面.

hash值的变化不会导致浏览器向服务器发出请求,而hash改变会触发 hashchange 事件(只改变#后面的url片段);hash发生变化url都会被浏览器记录下来,从而可以使用浏览器的前进和后退

对于hash模式会创建hashHistory对象,在访问不同的路由的时候,会发升者雹生两件事:

HashHistory.push()将新的路由添加到浏览器访问的历史的栈顶,和HasHistory.replace()替换到当前栈顶的路由

history模主要是通过 history Api的 pushState() 和 replaceState() 两个方法来实现的. pushState() 可以改变url地址且不会发送请求, replaceState() 可以读取历史记录栈,还可以对浏览器记录进行修改

以上两个方法可以修改历史状态,下面三个方法可以切换(定位)历史状态

Vue路由的使用

路由允许我们通过不同的URL去访问不同的内容，该URL可以是我们自己设置的，在项目中并没有这样的文件夹，这种功能就是路由

路由的本质是hash值

定：定义路由组件

配：配置路由

实：实例化路由

挂：挂载路由

路由（vue-router）的基本作用就是将每个路径映射到对应的组件，通过修改路由进行组件之间的转换

常规路径规则为在当前路径后面加上"/path"，path即为设定的前端路由路径

  跳转到上一次的页面：this.$router.go(-1);

  指定跳桐迅转的地址：this.$router.replace("/path");

  指定跳转的路由名字下：this.$router.replace({name:"menuLink"});

  通过push进行跳转:this.$router.push("/path");

  或this.$router.push({name:"path"});

  （1）设置一个默认展示组件，（不推荐！！！哪清）

        {path:"/",component:login}

    (2) 路由redirect重定向，设置默认组件

        {path:"/",redirect:"login"}

  （1）创建一个路由对象，当导入vue-router包之后，在window全局对象之中就有一个路由的构造函数VueRouter

  （2）在new路由对象的时候可以传递一个配置对象李轮前，这个配置对象的route表示路由器的匹配规则

  （3）每个路由规则都是一个对象，这个规则对象身上必须有两个属性

        属性1：path表示监听那个路由的链接地址

属性2：component表示如果路由是前面匹配到的path，则展示component属性对应的组件，

      component属性值必须是一个组件模板对象，不能是组件的引用名称

  （4）router：routerObj将路由规则对象，注册到VM实例上，用来监听URL地址的变化，然后展示对应的组件

  （5）使用vue官方提供的router-link元素使用它，默认渲染成一个a标签，router-link to="login"登录/router-link

  （6）在控制的div中（App.Vue）使用router-view/router-view

vue动态路由

template

  el-container style="height: 100vh; border: 1px solid #eee"

    el-aside width="200px" style="background-color: rgb(238, 241, 246)"

      !-- :default-openeds="['1', '3']" 表示默认打开第一个和第三个菜单 --

      !-- 1 对应了el-submenu index="1"

           2 对应了el-submenu index="2" --

      !-- el-submenu index="1-1 表示把el-submenu当作是第一个导航的第一个子项--

   陵正念   !--  :router="true 使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 --

      !-- default-active="/index/users" --

      !-- ★  :default-openeds 不可以直接使用['1'] 需要使用一个变量openList代替 因为值随时会变 如果写的

   清源   是['1'] 那么就永远不会改变 会出现点击二级菜单 一级菜单会缩起来的情况--

      !-- default-active="/index/users" 表示一进入页面就默认激活/index/user导航菜单

      default-active不能直接写死值路径要用变量代替 使用监听器 监听路由解决 --

      !-- unique-opened  是否只保持一个子菜单的展开 boolean 默认是false--

      el-menu

        :default-openeds="openList"

        :router="true"

        :default-active="pagepath"

        :unique-opened="true"

     

        !-- index接收的字符串类型，(i+1)是数字类型，所以使用toString方法转成字符串 传给index --

        !-- 因为i是从0开始的 所以需要加1 --

        el-submenu

          :index="(i + 1).toString()"

          v-for="(v, i) in navList"

          :key="i"

       

          template slot="title"

            i class="el-icon-menu"/i{{ v.authName }}/template

         

          !-- 子选项需要改成例如：1-1格式 以字符串的形式传给index属性 --

          !-- 因为子选项也是一个数组所以需要再次循环 --

          !-- :index="'/index/'+item.path" 路径最前面必须加上/ 否则会出现路径覆盖的问题 --

          el-menu-item

            :index="'/index/' + item.path"尺困

            v-for="(item, index) in v.children"

            :key="index"

            {{ item.authName }}/el-menu-item

         

        /el-submenu

      /el-menu

    /el-aside

    el-container

      el-header style="text-align: right; font-size: 12px"

        el-dropdown

          i class="el-icon-setting" style="margin-right: 15px"/i

          el-dropdown-menu slot="dropdown"

            el-dropdown-item查看/el-dropdown-item

            el-dropdown-item新增/el-dropdown-item

            el-dropdown-item删除/el-dropdown-item

          /el-dropdown-menu

        /el-dropdown

        span王小虎/span

      /el-header

      el-main

        router-view/router-view

      /el-main

    /el-container

  /el-container

/template

script

import axios from "axios";

export default {

  data() {

    return {

      navList: [],

      openList: ["1"],

      pagepath: "/index/users",

    };

  },

  watch: {

    /* 当路由发生变化的时候，就把最新的地址给到pagepath变量

    作用是为了保持路由菜单栏的高亮显示 以及解决点击不跳转的bug */

    $route: {

      handler: function (newV) {

        this.pagepath = newV.path;

      },

      immediate: true,

    },

  },

  created: function () {

    this.getNavList();

  },

  methods: {

    getNavList: function () {

      axios

        .get("/mock/menu.json", {

          headers: {

            Authorization: localStorage.token,

          },

        })

        .then((res) = {

          let { data, meta } = res.data;

          /* 数据获取成功 */

          if (meta.status == 200) {

            this.navList = data;

            /* 动态添加路由菜单 */

            /* 因为第一个路由是默认，所以我们从第二个路由开始动态添加 */

            /* slice不会改变原数据 而splice会 */

            let arr = this.navList.slice(1,3);

            /* 循环路由数组 动态添加路由 */

            arr.forEach(v = {

              /* 我们尽量使用v.children[0].path 原因是我们的路径名用的是子路由的 */

              /* 如果我们直接写死v.children[0].path 会导致只有一个子路由路径被动态添加了

              如果有多个，就无法生效了，所以我们要二次循环v.children,从而实现多个二级子路由

              能够被动态的添加 */

              v.children.forEach(r={

                this.$router.addRoute("index", {

                  path: r.path,

                  name: r.path,

                  /* 把名字改成我们页面的名称 例如CategoriesView.vue */

                  component: () = import(`@/views/${r.path.substring(0,1).toUpperCase()+r.path.substring(1)}View.vue`),

                });

              })

            });

            console.log(this.$router)

          } else {

            /* 防止数据获取失败，给出相应的后台提示 */

            this.$message.error(meta.msg);

          }

        })

        .catch((err) = {

          console.log(err);

        });

    },

  },

};

/script

style scoped

.el-header {

  background-color: #b3c0d1;

  color: #333;

  line-height: 60px;

}

.el-aside {

  color: #333;

}

/style

[img]

关于vue路由和vue路由传参的三种方式的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。