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

Vue中路由 (Vue Router)

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

一、 vue中路由 Router

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

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

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


1、作用

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


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

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

3.路由使用步骤


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>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CKpPylBL-1640243602421)(image/image.png)]


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

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>

0.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>


1.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>

2.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>

3.png


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


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

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

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

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

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

4.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>

5.png

2、切换到同一路由报错

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

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

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


6.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);
  }
};


7.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);
  }
};


8.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 router
VUE.js中路
VUE.js中路router
4yva5hg3m356w
目录
相关文章
热爱技术的小郑
|
1天前
|
JavaScript
Vue学习之--------路由的query、params参数、路由命名（3）（2022/9/5）
这篇文章详细介绍了Vue路由中的query参数、命名路由、params参数以及props配置的使用方式，并通过实际项目案例展示了它们在开发中的应用和测试结果，同时解释了`<router-link>`的`replace`属性如何影响浏览器历史记录。
热爱技术的小郑
10 4
Vue学习之--------路由的query、params参数、路由命名（3）（2022/9/5）
热爱技术的小郑
|
1天前
|
JavaScript
Vue学习之--------VueX（2022/8/31）
这篇文章是关于VueX的基础知识介绍，涵盖了VueX中的state、mutations、getters和actions的定义和使用，以及Action提交mutation而非直接变更状态，以及mutations的同步执行特性。
热爱技术的小郑
8 2
Vue学习之--------VueX（2022/8/31）
热爱技术的小郑
|
1天前
|
JavaScript
Vue学习之--------深入理解Vuex之多组件共享数据（2022/9/4）
这篇文章通过一个实际的Vue项目案例，演示了如何在Vuex中实现多组件间共享数据。文章内容包括在Vuex的state中新增用户数组，创建Person.vue组件用于展示和添加用户信息，以及在Count组件中使用Person组件操作的数据。通过测试效果展示了组件间数据共享和状态更新的流程。
热爱技术的小郑
8 1
Vue学习之--------深入理解Vuex之多组件共享数据（2022/9/4）
热爱技术的小郑
|
1天前
|
JavaScript
Vue学习之--------深入理解Vuex之模块化编码（2022/9/4）
这篇文章详细介绍了Vuex的模块化编码和命名空间的使用，旨在让代码更易于维护并提高数据分类的明确性。内容包括模块化和命名空间的概念、如何在store中配置模块、以及如何在组件中使用模块化的数据。文章通过实战项目案例，展示了如何拆分`store/index.js`文件，创建`count.js`和`person.js`模块，并在`Count.vue`和`Person.vue`组件中使用这些模块。最后，文章还提供了测试效果和一些使用注意点。
热爱技术的小郑
6 1
Vue学习之--------深入理解Vuex之模块化编码（2022/9/4）
热爱技术的小郑
|
1天前
|
存储 JavaScript 前端开发
Vue学习之--------路由(Router)的基本使用（1）（2022/9/5）
这篇文章是关于Vue-router路由的基本使用教程，涵盖了安装配置、应用插件、编写路由规则、实现页面跳转和高亮显示，以及一些使用中的注意点和项目实际应用案例。
热爱技术的小郑
7 1
Vue学习之--------路由(Router)的基本使用（1）（2022/9/5）
热爱技术的小郑
|
1天前
|
缓存 JavaScript
Vue学习之--------多级路由的使用（2）（2022/9/5）
这篇文章介绍了在Vue中实现多级路由缓存的方法，包括在路由配置中添加meta属性以启用缓存，使用keep-alive组件包裹需要缓存的视图，以及在Vuex中管理缓存视图列表的逻辑。
热爱技术的小郑
6 1
Vue学习之--------多级路由的使用（2）（2022/9/5）
热爱技术的小郑
|
1天前
|
JavaScript 前端开发 开发者
Vue学习之--------深入理解Vuex、原理详解、实战应用（2022/9/1）
这篇文章详细介绍了Vuex的基本概念、使用场景、安装配置、基本用法、实际应用案例以及注意事项，通过一个数字累加器的实战示例，帮助开发者深入理解Vuex的原理和应用。
热爱技术的小郑
8 1
小周sir
|
1天前
|
存储 JavaScript API
vue后台管理权限码处理
【8月更文挑战第19天】vue后台管理权限码处理
小周sir
8 0
热爱技术的小郑
|
1天前
|
JavaScript
Vue学习之--------深入理解Vuex之getters、mapState、mapGetters（2022/9/3）
这篇文章深入探讨了Vuex中的getters概念和用法，以及如何通过mapState、mapGetters、mapActions和mapMutations四个辅助函数简化组件中的Vuex状态访问和操作，通过实际项目案例展示了这些概念的应用和效果。
热爱技术的小郑
3 0
热爱技术的小郑
|
4天前
|
JavaScript
Vue中如何设置在执行删除等危险操作时给用户提示（二次确认后执行对应的操作）
这篇文章介绍了在Vue项目中如何实现执行删除等危险操作时的二次确认机制，使用Element UI的`el-popconfirm`组件来弹出确认框，确保用户在二次确认后才会执行删除操作。
热爱技术的小郑
20 0
Vue中如何设置在执行删除等危险操作时给用户提示（二次确认后执行对应的操作）