【vue路由的原理，配置，传参】

阿尧不会武功

已于 2022-09-23 20:06:04 修改

阅读量1.9k

点赞数 1

文章标签： vue.js 前端 javascript

于 2022-09-20 21:17:50 首次发布

本文链接：https://blog.youkuaiyun.com/qq_72580318/article/details/126959565

版权

本文详细介绍了Vue.js路由的工作原理，包括前端路由的基本概念、Vue路由的优势，以及Vue路由的配置步骤，如导入第三方库、设置router-link、创建路由对象等。此外，还讲解了二级路由、声明式和编程式导航跳转，以及URL拼接和动态路由传值的方法。总结了Vue路由的实现原理和配置步骤，并对比了不同路由跳转和传值方式的优缺点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

系列文章目录

第一章
例如：第一章 Python 机器学习入门之pandas的使用

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

Vue.路由

前言
一、vue.路由的原理
二、vue.路由配置
三，二级路由
四，路由跳转
五，路由跳转
六，url拼接传值方式
七，动态路由传值
总结

前言

提示：了解和合理运用：

例如：实现一些页面之间的互相跳转。

提示：以下是本篇文章正文内容，下面案例可供参考

一、路由的原理

监听的是onhashchange事件，根据哈希值变化来实现页面切换。如果哈希值发生变化了，在事件函数展示对应的界面。

1.前段路由？

一个完整的url的组成部分#后面的部分称为哈希值，哈希值最初的作用就是为了实现页面的锚点的作用，h5之后，单页面应用(spa)比较流行，单页面值的就是整个项目只有一个页面，根据设置的哈希值进行组件之间的切换，这种采用哈希值进行页面切换的技术就是前段路由、

2.vue路由的优势？

（1）哈希值技术属于浏览器的技术，每一次在组件切换的时候，不会吧哈希值发给后台，也就是说在页面之间进行切换的时候不需要发送请求。

代码如下

<body>
   <!-- a标签的herf属性可以取哪些值？ -->
   <a href="http://www.baidu.com">百度</a>
   <a href="./1案例.html">案例</a>
   <a href="javascript:;">不跳转</a>
   <a href="#">不跳转</a>
   <br>
   <!-- 路由实现的时候采用的第四种写法，herf属性属性值如果以#开头 网页不会刷新的 -->
   <a href="#/home">首页</a>
   <a href="#/user">用户</a>
   <a href="#/login">登录</a>
   <!-- a标签的href属性如果以#开头 访问的时候把#/路径拼接到url之后，并且页面不刷新 -->
  <h1 id="routerview"></h1> 这个标签是路由的出口标签
</body>

<script>
    //当哈希值发生变化的时候触发的回调
    window.onhashchange = function(){
        console.log(location.hash)
        if(location.hash=="#/home"){
            routerview.innerText="这是主页新闻-----中国---兰考，开封---兰考"
        }else if(location.hash=="#/user"){
            routerview.innerText="这是用户界面-----中国---兰考，开封---兰考"
        }else if(location.hash=="#/login"){
            routerview.innerText="这是登录-----中国---兰考，开封---兰考"
        }
    }
    window.onload = function(){
        location.hash = '#/home'
        routerview.innerText="这是主页新闻-----中国---兰考，开封---兰考"
    }
</script>

二、vue.路由使用步骤

    (1) 导入vue路由第三方
    (2) 添加router-link 标签
    (3) 添加路由组件
    (4) 创建路由对象添加路由匹配
    (5) 根组件注册路由器对象
    (6) 添加router-view 展示路由组件

代码如下（示例）：

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<div id='myApp'>
    <!-- 2 在vue路由通过router-link组件进行页面跳转，其实对a标签的封装 
        to属性设置要跳转组件对应的哈希值 不要加#
    -->
    <router-link to="/home" >首页</router-link>
    <router-link to="/login" >登录</router-link>
    <router-link to="/user" >用户</router-link>

    <!-- 6 添加路由出口标签 router-view 就是路由出口标签-->
    <router-view></router-view>
</div>
</body>
<script src='vue.js'></script>
<!-- 1 导入vue路由第三方 -->
<script src="vue-router.js"></script>
<script>
// 3 添加路由跳转所对应的组件
var Home = Vue.component("homeCom",{
    template:`<h1>这是首页</h1>`
})
var Login = Vue.component("homeCom",{
    template:`<h1>这是登录</h1>`
})
var User = Vue.component("homeCom",{
    template:`<h1>这是用户</h1>`
})

// 4 创建路由对象并且添加路由匹配规则
var router = new VueRouter({
    // router 路由器对象 有且仅有一个路由器对象
    // routes 路由器当中的组件和路由的匹配关系 一条路线
    routes:[
        {
            path:"/home", //path 路由的地址
            component:Home //component 路由所对应的组件
        },
        {
            path:"/login", //path 路由的地址
            component:Login //component 路由所对应的组件
        },
        {
            path:"/user", //path 路由的地址
            component:User //component 路由所对应的组件
        },
        {
            path:"/",
           redirect:"/home"  // 重定向到home组件

        },
        
    ]
})
    new Vue({
        el: '#myApp',
        data: {
        },
        methods: {
            
        },
        // 5 在根组件里面注册路由器对象
        router
    })
</script>
</html>

三，二级路由

1.设置二级路由的时候，需要将router-link标签router-view出口标签写在一级路由组件里面，需要在创建路由对象并且添加路由匹配规则，rutes路由组件和路由的匹配关系里面设置children:[] 字段

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<style>
    /* a{
        color: red;
        display: block;
    } */
</style>
</head>
<body>
<div id='myApp'>
    <!-- <a href="#/home">主页</a>
     <a href="#/user">用户</a>
     <a href="#/login">登录</a> -->
    <router-link to="/home">主页</router-link>
    <router-link to="/user">用户</router-link>
    <router-link to="/login">登录</router-link>
    <router-view></router-view>
</div>
</body>
<script src='vue.js'></script>
<script src="vue-router.js"></script>
<script>
var Home = Vue.component("homeCom",{
    template:`<h1>我是主页--李易峰</h1>`
})
var Login = Vue.component("loginCom",{
    // 设置二级路由时候 二级路由路径规范 :/一级路由/二级路由
    // 二级路由的组件出口标签添加到login组件里面
    template:`<div>
        <h1>登录界面</h1>
        <router-link to="/login/qq">QQ登录</router-link>
        <router-link to="/login/tel">手机号登录</router-link>
        <router-link to="/login/wechat">微信登录</router-link>
        <router-view></router-view>
        </div>`
})
var User = Vue.component("userCom",{
    template:`<h1>用户界面</h1>`
})
// 自定义404界面
var NotFound = Vue.component("notFound",{
    template:`<h1>Not Fount 404 </h1>`
})

// 二级路由界面
var QQ =  Vue.component("qqCom",{
    template:`<h1>QQ登录</h1>`
})

var Tel =  Vue.component("telCom",{
    template:`<h1>手机号登录</h1>`
})

var WeiXin =  Vue.component("wxCom",{
    template:`<h1>微信登录</h1>`
})

var router = new VueRouter({
    routes:[
        {
            path:"/home",
            component:Home
        },
        {
            path:"/login",
            component:Login,
            // 设置组件下的子路由的匹配规则
            // 设置子路由path时候 可以把/去掉，，访问时候需要拼上一级路由 
            children:[
                {
                    path:"qq",
                    component:QQ
                },
                {
                    path:"tel",
                    component:Tel
                },
                {
                    path:"wechat",
                    component:WeiXin
                }
            ]
        },
        {
            path:"/user",
            component:User
        },
        {
            path:"/",
            redirect:"/home"
        },
        // 404 一般定义在路由匹配关系的最后面
        // path:"*" 匹配所有的路由地址， 如果路由地址被前面的匹配规则匹配上，这时候显示所对应的组件，不会再往下进行匹配，如果当前路由没有匹配到，往下一直找匹配，直到找到*为止。
        // /login1
        {
            path:"*",
            component:NotFound
        }
    ]
})

    new Vue({
        el: '#myApp',
        data: {
            
        },
        methods: {
            
        },
        router
    })
</script>
</html>

四，路由跳转

1.声明式导航栏跳转 router-link

2.编程式导航跳转push（"/login"） push（path:""） push({name:"组件name属性"})使用js是实现方式为编程式导航跳转

例如 <button @click="goMain">主页</button>

步骤：

1 .导入vue路由第三方

2. 在vue路由通过router-link组件进行页面跳转，其实对a标签的封装

to属性设置要跳转组件对应的哈希值不要加#

3. 添加路由跳转所对应的组件

4 .创建路由对象并且添加路由匹配规则

router 路由器对象有且仅有一个路由器对象

routes 路由器当中的组件和路由的匹配关系一条路线

5.在根组件里面注册路由器对象

6 .添加路由出口标签 router-view 就是路由出口标签


<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
    <!-- 路由器对象访问 this.$router进行访问，非框架的时候访问router -->
<div id='myApp'>
    <!-- 2 在vue路由通过router-link组件进行页面跳转，其实对a标签的封装 
        to属性设置要跳转组件对应的哈希值 不要加#
    -->
    <!-- 使用router-link 实现路由跳转的方式为声明式导航跳转 -->
    <router-link to="/home" >首页</router-link>
    <router-link to="/login" >登录</router-link>
    <router-link to="/user" >用户</router-link>

    <!-- 使用js实现跳转方式为编程式导航跳转 -->

    <!-- 6 添加路由出口标签 router-view 就是路由出口标签-->
    <router-view></router-view>
</div>
</body>
<script src='vue.js'></script>
<!-- 1 导入vue路由第三方 -->
<script src="vue-router.js"></script>
<script>
// 3 添加路由跳转所对应的组件
var Home = Vue.component("homeCom",{
    template:`<h1>这是首页</h1>`
})
var Login = Vue.component("homeCom",{
    template:`<h1>这是登录</h1>`
})
var User = Vue.component("homeCom",{
    template:`<h1>这是用户</h1>`
})

// 4 创建路由对象并且添加路由匹配规则
var router = new VueRouter({
    // router 路由器对象 有且仅有一个路由器对象
    // routes 路由器当中的组件和路由的匹配关系 一条路线
    routes:[
        {
            path:"/home", //path 路由的地址
            component:Home, //component 路由所对应的组件
            // 添加name属性之后，路由又可以称为命名路由，可以name属性访问改路由
            name:"main"
        },
        {
            path:"/login", //path 路由的地址
            component:Login //component 路由所对应的组件
        },
        {
            path:"/user", //path 路由的地址
            component:User //component 路由所对应的组件
        },
        {
            path:"/",
           redirect:"/home"  // 重定向到home组件

        },
        
    ]
})
    new Vue({
        el: '#myApp',
        data: {
            
        },
        methods: {
            goMain(){
                // 1:跳转方式 使用push，参数是路由地址
                // router.push("/home")

                // 2：push()的参数是对象，对象里面添加path:"/home"
                // router.push({
                //     path:"/home"
                // })

                // 3 push()可以使用命名路由进行跳转 参数是路由名称
                // router.push({
                //     name:"main"
                // })

                // 返回上一个路由页面
                // router.back()

                // replace() 替换，没有在历史记录里面
                // router.replace("/home")
                
                // this.$router全局的路由器对象 router全局路由器对象
                console.log(this.$router,router,this.$router==router)

                // 当前页的路由对象信息
                console.log(this.$route)

                // 注意 编程式导航跳转，当前页跳转到当前页会报错
                if(this.$route.path!="/home"){ 
                    // 判断当前页是不是要跳转的目标页面
                    this.$router.push("/home")
                }
                // this.$router 和 this.$route 俩个对象区别？  
            }
        },
        // 5 在根组件里面注册路由器对象
        router
    })
</script>
</html>

六，url拼接传值方式

声明式导航跳转传值（使用标签跳转）编程式导航跳转传值（js跳转传值）

1.url拼接方式传值：传递时候把传递数据拼接在路由后,/home?name=固定数据，通过？把路由地址和传输地址进行分开，获取$route.query.参数

2.动态路由传值： query对象传值 params对象传值

代码如下

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<div id='myApp'>

    <!-- 
        声明式导航跳转传值(使用标签跳转传值)和编程式导航跳转传值(js跳转传值)
        1 url拼接方式传值 ：传递时候把传递数据拼接在路由后，/home?name=死数据，通过?把路由地址和传递数据进行分开，获取$route.query.参数名
        2 动态路由传值
        3 query对象传值
        4 params对象传值
     -->
     <!-- url拼接传值 在路由后面添加传递的数据 使用?和路由进行隔开，多个数据之间使用&进行分开-->
     <router-link to="/home?name=死数据">主页</router-link>
     <router-link to="/user">用户</router-link>
     <router-link to="/login">登录</router-link>
     <router-view></router-view>

</div>
</body>
<script src='vue.js'></script>
<script src="vue-router.js"></script>
<script>
  var Home =   Vue.component("homeCom",{
        template:`<div>主页-------{{$route.query.name}}</div>`,
        mounted() {
            console.log(this.$route)
        },
    })

 var User = Vue.component("userCom",{
        template:`<div>
            这是用户界面
             <input v-model="num">
             <button @click="login">去登录</button>
            </div>`,
        data(){
            return {
                num:0
            }
        },
        methods:{
            login(){
                // url拼接传值
                this.$router.push("/login?name="+this.num)
            }
        }
        
    })
  var Login =Vue.component("loginCom",{
        template:`<div>
            这是登录界面{{$route.query.name}}
            </div>`,  
    })

var router = new VueRouter({
    routes:[ {
            path:"/home", //path 路由的地址
            component:Home //component 路由所对应的组件
        },
        {
            path:"/login", //path 路由的地址
            component:Login //component 路由所对应的组件
        },
        {
            path:"/user", //path 路由的地址
            component:User //component 路由所对应的组件
        },
        {
            path:"/",
            redirect:"/home"
        },
    ]
})

    new Vue({
        el: '#myApp',
        data: {
            
        },
        methods: {
            
        },
        router
    })
</script>
</html>

七，动态路由传值

1 url拼接方式传值：传递时候把传递数据拼接在路由后，/home?name=死数据，通过?把路由地址和传递数据进行分开，获取$route.query.参数名

2 动态路由传值:

(1)现在组件配置对象里面设置路由地址为动态路由，

(2)在跳转的视乎，给路由后面添加/传递的数据，例如./home/固定数据

(3)接受数据通过$route.params.name

(4) query对象传值 params对象传值

3 path 路由的地址 :name这一层路径为动态，name是变量，/home/1

代码如下

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<div id='myApp'>

    <!-- 
        声明式导航跳转传值(使用标签跳转传值)和编程式导航跳转传值(js跳转传值)
        1 url拼接方式传值 ：传递时候把传递数据拼接在路由后，/home?name=死数据，通过?把路由地址和传递数据进行分开，获取$route.query.参数名

        2 动态路由传值:
            1 先在组件配置对象里面设置路由地址为动态路由
            2 在跳转的时候，给路由后面添加/传递的数据 ，例如/home/死数据、
            3 接收数据通过 $route.params.name

        3 query对象传值
        4 params对象传值
     -->
     <!-- url拼接传值 在路由后面添加传递的数据 使用?和路由进行隔开，多个数据之间使用&进行分开-->
     <router-link to="/home/死数据">主页</router-link>
     <router-link to="/user">用户</router-link>
     <router-link to="/login">登录</router-link>
     <router-view></router-view>

</div>
</body>
<script src='vue.js'></script>
<script src="vue-router.js"></script>
<script>
  var Home =   Vue.component("homeCom",{
        template:`<div>主页-------{{$route.params.name}}</div>`,
        mounted() {
            console.log(this.$route)
        },
    })

 var User = Vue.component("userCom",{
        template:`<div>
            这是用户界面
             <input v-model="num">
             <button @click="login">去主页</button>
            </div>`,
        data(){
            return {
                num:0
            }
        },
        methods:{
            login(){
              this.$router.push("/home/"+this.num)
            }
        }
        
    })
  var Login =Vue.component("loginCom",{
        template:`<div>
            这是登录界面
            </div>`,  
    })

var router = new VueRouter({
    routes:[
        {
            path:"/home", 
            component:Home
        },
        {
            path:"/home/:name", //path 路由的地址 :name这一层路径为动态，name是变量，/home/1
            component:Home //component 路由所对应的组件
        },
        {
            path:"/login", //path 路由的地址
            component:Login //component 路由所对应的组件
        },
        {
            path:"/user", //path 路由的地址
            component:User //component 路由所对应的组件
        },
        {
            path:"/",
            redirect:"/home"
        },
    ]
})

    new Vue({
        el: '#myApp',
        data: {
            
        },
        methods: {
            
        },
        router
    })
</script>
</html>