AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Vue中路由 (Vue Router)

2021-12-27 289
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Vue中路由 (Vue Router)

Vue中路由 (Vue Router)

一、 vue中路由 Router

路由:根据请求的路径按照一定的路由规则进行请求的转发从而帮助我们实现统一请求的管理


概念：它和vue.js的核心深度集成，让构成单页面应用变得易如反掌


理解：让组件使用变得更加灵活，路由可以根据用户访问的url不同动态切换当前使用的组件


1、作用

用来在vue中实现组件之间的动态切换


路由核心功能：根据用户访问的url动态切换组件

路由是配合组件一起使用的

路由使用步骤

1. 创建组件
2.创建路由( 1.管理组件 2.制定路由规则)
3.将路由交由vue管理 在vue中注册路由
4.在vue实例范围内指定位置，使用路由选中组件

2、使用路由

（1）引入路由

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>  //vue 路由js

（2）创建组件对象

//声明组件模板
const login = {
  template:'<h1>登录</h1>'
};
const register = {
  template:'<h1>注册</h1>'
};

（3）定义路由对象的规则

 //创建路由对象
const router = new VueRouter({
  routes:[
    {path:'/login',component:login},   //path: 路由的路径  component:路径对应的组件
    {path:'/register',component:register}
  ]
});

（4）将路由对象注册到vue实例

const app = new Vue({
  el: "#app",
  data: {
    username:"小陈",
  },
  methods: {},
  router:router   //设置路由对象
});

（5）在页面中显示路由的组件

<!--显示路由的组件-->
<router-view></router-view>

（6）根据连接切换路由

<a href="#/login">点我登录</a>
<a href="#/register">点我注册</a>

3、vue中路由 Router案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>route的基本使用</title>
</head>
<body>
<div id="app">
  {{msg}}
  <!--4、路由选中的组件展示-->
  <div><router-view></router-view></div>
</div>
</body>
</html>
<script src="../js/vue-min.js"></script>
<script src="../js/vue-router.js"></script>
<script>
  const  login={
    template:`<div><h2>登录组件</h2></div>`
  }
  const  reg={
    template:`<div><h2>注册组件</h2></div>`
  }
  //创建路由 1、管理组件 2、配置路由规则
  const  router=new VueRouter({
  //  指定路由规则
    routes:[
      {path:"/login",component:login},
      {path:"/register",component:reg}
    ]
  });
  new Vue({
    el:"#app",
    data:{
      msg:"route的基本使用"
    },
  //  3.将路由对象注册给vue实例
    router
  })
</script>

二、通过超链接切换路由的方式

1、链接切换路由

<!-- 使用链接切换路径-->
  <a href="#/login">登录组件</a>
  <a href="#/register">注册组件</a>

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>route的基本使用</title>
</head>
<body>
<div id="app">
  {{msg}}
  <!--4、路由选中的组件展示-->
  <div><router-view></router-view></div>
<!-- 使用链接切换路径-->
  <a href="#/login">登录组件</a>
  <a href="#/register">注册组件</a>
</div>
</body>
</html>
<script src="../js/vue-min.js"></script>
<script src="../js/vue-router.js"></script>
<script>
  const  login={
    template:`<div><h2>登录组件</h2></div>`
  }
  const  reg={
    template:`<div><h2>注册组件</h2></div>`
  }
  //路由错误时的提示组件
  const notFound={
    template:`<div><h2>你访问的路径有误，请重新输入</h2></div>`
  }
  //创建路由 1、管理组件 2、配置路由规则
  const  router=new VueRouter({
  //  指定路由规则
    routes:[
      {path:"/",redirect:"/login"},//配置根路由 切换方式为：重定向到指定路径
      {path:"/login",component:login},
      {path:"/register",component:reg},
      {path:"*",component:notFound}   //路径错误时的提示
    ]
  });
  new Vue({
    el:"#app",
    data:{
      msg:"route的基本使用"
    },
  //  3.将路由对象注册给vue实例
    router
  })
</script>

image.png


2、router-link使用

作用:用来替换我们在切换路由时使用a标签切换路由


好处:就是可以自动给路由路径加入#不需要手动加入


（1）使用router-link切换路由

<router-view></router-view>
<!-- 使用链接切换路径-->
  <a href="#/login">登录组件</a>
  <a href="#/register">注册组件</a>
<!--使用router-link切换路由-->
    <hr/>
<router-link to="/login">登录组件</router-link>
<router-link to="/register">注册组件</router-link>


image.png

（2）根据路径去切换路由

<router-view></router-view>
    <!-- 使用链接切换路径-->
    <a href="#/login">登录组件</a>
    <a href="#/register">注册组件</a>
    <!--使用router-link切换路由-->
    <hr/>
    <router-link to="/login">登录组件</router-link>
    <router-link to="/register">注册组件</router-link>
    <hr/>
    <!--根据路径去切换路由 -->
    <router-link :to="{path:'/login'}">登录组件</router-link>
    <router-link :to="{path:'/register'}">注册组件</router-link>

image.png


（3）根据名称去切换路由 官方推荐 解耦合

官方建议使用名称切换，可以和当前路由配置的path解耦合 修改path属性不会影响到路由切换

    <router-view></router-view>
    <!-- 使用链接切换路径-->
    <a href="#/login">登录组件</a>
    <a href="#/register">注册组件</a>
    <!--使用router-link切换路由-->
    <hr/>
    <router-link to="/login">登录组件</router-link>
    <router-link to="/register">注册组件</router-link>
    <hr/>
    <!--根据路径去切换路由-->
    <router-link :to="{path:'/login'}">登录组件</router-link>
    <router-link :to="{path:'/register'}">注册组件</router-link>
    <hr/>
    <!--根据名称去切换路由 官方推荐-->
    <hr/>
    <router-link :to="{name:'login'}">登录组件</router-link>
    <router-link :to="{name:'register'}">注册组件</router-link>


image.png

# 总结:
  1.router-link 用来替换使用a标签实现路由切换 好处是不需要书写#号直接书写路由路径
  2.router-link to属性用来书写路由路径   tag属性:用来将router-link渲染成指定的标签

三、通过js切换路由的方式

当前vue实例中 存在两个路由相关的对象


$router 当前路由对象 | $router路由管理器对象


切换路由使用时 路由管理器对象 $router


语法：this.$router.push({name:"目标路由的name属性值"})


image.png

2、通过js切换路由的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由的切换</title>
</head>
<body>
<div id="app">
    <router-view></router-view>
    <!--根据名称去切换路由 官方推荐-->
    <hr/>
    <router-link :to="{name:'login'}">登录组件</router-link>
    <router-link :to="{name:'register'}">注册组件</router-link>
    <hr/>
    <button @click="toLogin()">切换到登录</button>
</div>
</body>
</html>
<script src="../js/vue-min.js"></script>
<script src="../js/vue-router.js"></script>
<script>
    const login = {
        template: `<div><h2>登录组件</h2></div>`
    }
    const reg = {
        template: `<div><h2>注册组件</h2></div>`
    }
    //路由错误时的提示组件
    const notFound = {
        template: `<div><h2>你访问的路径有误，请重新输入</h2></div>`
    }
    //2、创建路由 1、管理组件 2、配置路由规则
    const router = new VueRouter({
        //  指定路由规则
        routes: [
            {path: "/", redirect: "/login"},//配置根路由 切换方式为：重定向到指定路径
            {path: "/login", component: login, name: "login"},
            {path: "/register", component: reg, name: "register"},
            {path: "*", component: notFound}   //路径错误时的提示
        ]
    });
    new Vue({
        el: "#app",
        data: {
            msg: "route的基本使用"
        },
        methods: {
            toLogin() {
                //  发送请求
                // axios.get("url").then(()=>{})
                //  正确响应时切换到登录页面 当前路由 routrt VueRouter路由管理对象
                console.log(this);
                //使用路由管理器对象 推入新的路由对象 替换原有的路由
                this.$router.push({name:"login"});
            }
        },
        //  3.将路由对象注册给vue实例
        router: router
    })
</script>

image.png


2、切换到同一路由报错

通过js程序切换路由时 存在的一个错误提示


原因：反复切换同一路由组件出现错误提示：


vue-router.js:2071 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/login".


image.png


解决方案：


（1）通过程序去切换路由时，添加一个判断，如果要切换的是对应的路由，使用的路由组件不切换


methods: {
            toLogin() {
              console.log(this);
                //使用路由管理器对象 推入新的路由对象 替换原有的路由
                if(this.$route.name!="login"){  //判断 当前的路由对象是否要切换的路由
                    this.$router.push({name:"login"});
                }
            },
            toRegister() {
              //使用路由管理器对象 推入新的路由对象 替换原有的路由
                if(this.$route.name!="register")
                this.$router.push({name:"register"});
            }
        }

(2)通过配置的形式


反复切换同一个路由出现问题的解决方案 (配置信息)

  const VueRouterPush = VueRouter.prototype.push
  VueRouter.prototype.push = function push (to) {
      return VueRouterPush.call(this, to).catch(err => err)
  }

四、默认路由

作用:用来在第一次进入界面是显示一个默认的组件

  //2、创建路由 1、管理组件 2、配置路由规则
    const router = new VueRouter({
        //  指定路由规则
        routes: [
            {path: "/", redirect: "/login"},//配置根路由 切换方式为：重定向到指定路径
            {path: "/login", component: login,name:"login"},
            {path: "/register", component: reg,name:"register"},
            {path: "*", component: notFound}   //路径错误时的提示
        ]
    });

五、路由中参数传递

1、第一种方式传递参数 传统方式

（1）通过?号形式拼接参数

 <router-link to="/login?id=21&name=zhangsan">我要登录</router-link>

（2）组件中获取参数

const login = {
  template:'<h1>用户登录</h1>',
  data(){return {}},
  methods:{},
  created(){
    console.log("=============>"+this.$route.query.id+"======>"+this.$route.query.name);
  }
};

image.png


2、第二种方式传递参数 restful风格

指定动词: get post put delete


（1）通过使用路径方式传递参数

<router-link to="/register/24/张三">我要注册</router-link>
var router = new VueRouter({
  routes:[
    {path:'/register/:id/:name',component:register}   //定义路径中获取对应参数
  ]
});

（2）组件中获取参数

const register = {
  template:'<h1>用户注册{{ $route.params.name }}</h1>',
  created(){
    console.log("注册组件中id:   "+this.$route.params.id+this.$route.params.name);
  }
};

image.png


六、 嵌套路由

1、声明最外层和内层路由

<template id="product">
    <div>
        <h1>商品管理</h1>
        <router-link to="/product/add">商品添加</router-link>
        <router-link to="/product/edit">商品编辑</router-link>
        <router-view></router-view>
    </div>
</template>
//声明组件模板
const product={
  template:'#product'
};
const add = {
  template:'<h4>商品添加</h4>'
};
const edit = {
  template:'<h4>商品编辑</h4>'
};

2、创建路由对象含有嵌套路由

const router = new VueRouter({
        routes:[
            {
                path:'/product',
                component:product,
                children:[
                    {path:'add',component: add},
                    {path:'edit',component: edit},
                ]
            },
        ]
    });

3、注册路由对象

const app = new Vue({
    el: "#app",
    data: {},
    methods: {},
    router,//定义路由对象
});

4、测试路由

<router-link to="/product">商品管理</router-link>
<router-view></router-view>

七、综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>router</title>
</head>
<body>
<div id="app">
    {{msg}}
    <a href="#/users">点击切换展示所有</a>
    <router-link to="/users">点击切换展示所有</router-link>
    <router-link :to="{path:'/users'}">点击切换展示所有</router-link>
    <router-link :to="{name:'Users'}">点击切换展示所有</router-link>
    <hr/>
    <a href="#/users/userAdd">添加</a>
    <!--4、在vue实例范围内使用路由选中组件-->
    <router-view/>
</div>
</body>
</html>
<!--展示所有用户组件模板template-->
<template id="users">
    <div>
        <table border="1">
            <tr>
                <td>编号</td>
                <td>名称</td>
                <td>年龄</td>
                <td>薪资</td>
                <td>操作</td>
            </tr>
            <tr v-for="(user,index) in users" :key="user.id">
                <td>{{user.id}}</td>
                <td>{{user.name}}</td>
                <td v-text="user.age"></td>
                <td v-html="user.salary"></td>
                <td><a href="">删除</a> | <router-link :to="{name:'UserUpdate',query:{id:user.id}}">修改</router-link></td>
            </tr>
        </table>
        <!--展示子路由选中的组件-->
        <router-view/>
    </div>
</template>
<script src="../js/vue-min.js"></script>
<script src="../js/vue-router.js"></script>
<script>
    //1、创建组件
    //展示所有用户组件
    const users = {
        template:"#users",
        data(){
            return{
                users:[]
            }
        },
        created(){
            //发送异步请求 接收数据交给当前组件管理
            /* axios.get("url").then(response=>{
                this.users = response.data
            }).catch(erro=>{
            })*/
            this.users = [{id:1 , name:"王恒杰",age:18,salary:18},{id:2 , name:"杨福君",age:58,salary:58}]
        }
    }
    const userAdd = {
        template:`<div>名称:<input type="text" v-model="user.name"/> <br/> 年龄:<input type="text" v-model="user.age"/><br/> 薪资:<input type="text" v-model="user.salary"/><br/> <button @click="addUser">添加</button></div>` ,
        data(){
            return{
                user:{}
            }
        },
        methods:{
            addUser(){
                //发送异步请求 完成数据添加  用户数据接收
                /*axios.post("url", this.user).then(response=>{
                }).catch(error=>{
                })*/
                //2 切换路由  this   $route 当前路由对象 Object   |  $router  当前路由管理器对象 VueRouter
                this.$router.push({name:"Users"})
            }
        }
    }
    const userUpdate = {
        template:`<div>编号:<input type="text" v-model="user.id"/> <br/>名称:<input type="text" v-model="user.name"/> <br/> 年龄:<input type="text" v-model="user.age"/><br/> 薪资:<input type="text" v-model="user.salary"/><br/><button @click="updateUser">修改</button></div>`
        ,
        data(){
            return{
                user:{}
            }
        },
        methods:{
            updateUser(){
                //切换路由  切换到展示所有路由
                this.$router.push({name:"Users"})
            }
        },
        created(){
            let id = this.$route.query.id;
            //发送异步请求查询数据  数据回显
            /*axios.get("url?id="+id).then(response=>{
                  this.user= response.data
            }).catch(error=>{})*/
            this.user = {id,name:"liuh",age:18,salary:18}
        }
    }
    //2、创建路由   a、管理组件   b、配置路由规则 [/users - 组件]
    const router = new VueRouter({
        routes:[
            {path:"/users" , component:users , name:"Users" ,
                /*配置路由的子路由     注意： path属性中不能以/开头  切换子路由：/users/userAdd   */
                children:[
                    {path:"userAdd" , component:userAdd , name:"UserAdd"},
                    {path:"userUpdate" , component:userUpdate , name:"UserUpdate"}
                ]
            } ,
            /*{path:"/userAdd" , component:userAdd , name:"UserAdd"}*/
        ]
    });
    new Vue({
        el:"#app" ,
        data:{
            msg:"路由嵌套！"
        },
        //3、将路由交由vue实例管理
        router
    })
</script>
文章标签：
JavaScript
前端开发
关键词：
vue router VUE.js
router VUE.js
VUE.js路由
VUE.js router
VUE.js中路
程序员小王java
目录
相关文章
34789737
|
3月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中，兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线，大型项目建议使用Pinia等状态管理工具，确保数据流清晰可控，避免内存泄漏。
34789737
364 2
哇塞女孩
|
2月前
|
缓存 JavaScript
vue中的keep-alive问题（2）
vue中的keep-alive问题（2）
哇塞女孩
330 137
谢妹纸
|
6月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
谢妹纸
843 0
我们是幸福一家人
|
6月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
我们是幸福一家人
374 82
rvblio6ca4cug
|
5月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎，秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」，成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构，实现设计到代码全流程自动化，效率提升300%，助力企业降本增效，引领“设计即生产”新时代。
rvblio6ca4cug
492 1
34789737
|
5月前
|
JavaScript 安全
在 Vue 中，如何在回调函数中正确使用 this？
在 Vue 中，如何在回调函数中正确使用 this？
34789737
310 0
34789737
|
6月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件，包括基础与高级示例。组件支持分段配置（如颜色、文本）、动画效果及超出进度提示等功能。同时提供了完整的代码实现，支持全局注册，并提出了优化建议，如主题支持、响应式设计等，帮助开发者更灵活地集成和定制进度条组件。资源链接已提供，适合前端开发者参考学习。
34789737
504 17
34789737
|
6月前
|
JavaScript 前端开发 UED
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用，可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置（如自定义表情列表、主题定制、动画效果和懒加载）以及完整集成示例。开发者可根据需求扩展功能，例如 GIF 搜索或自定义表情上传，提升用户体验。资源链接提供进一步学习材料。
34789737
315 1
34789737
|
6月前
|
存储 JavaScript 前端开发
如何高效实现 vue 文件批量下载及相关操作技巧
在Vue项目中，实现文件批量下载是常见需求。例如文档管理系统或图片库应用中，用户可能需要一次性下载多个文件。本文介绍了三种技术方案：1) 使用`file-saver`和`jszip`插件在前端打包文件为ZIP并下载；2) 借助后端接口完成文件压缩与传输；3) 使用`StreamSaver`解决大文件下载问题。同时，通过在线教育平台的实例详细说明了前后端的具体实现步骤，帮助开发者根据项目需求选择合适方案。
34789737
620 0
34789737
|
6月前
|
JavaScript 前端开发 UED
Vue 项目中如何自定义实用的进度条组件
本文介绍了如何使用Vue.js创建一个灵活多样的自定义进度条组件。该组件可接受进度段数据数组作为输入，动态渲染进度段，支持动画效果和内容展示。当进度超出总长时，超出部分将以红色填充。文章详细描述了组件的设计目标、实现步骤（包括props定义、宽度计算、模板渲染、动画处理及超出部分的显示），并提供了使用示例。通过此组件，开发者可根据项目需求灵活展示进度情况，优化用户体验。资源地址：[https://pan.quark.cn/s/35324205c62b](https://pan.quark.cn/s/35324205c62b)。
34789737
308 0