Vue路由

最新推荐文章于 2022-05-06 21:23:48 发布

Oak_树

最新推荐文章于 2022-05-06 21:23:48 发布

阅读量67

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/sw542416/article/details/110249707

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Vue路由

<script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

创建路由

var route=new VueRouter({
        routes:[
            {path:"/",redirect:"/login"},//改变哈希值
            {path:"/login",component:login},//component的参数是一个组件对象，不能是一个引用名称:'login'
            {path:"/regist",component:regist}
        ]
    })

path表示路径的哈希值

component表示对应path下显示的组件

需要在Vue中注册

重定向

redirect和component不同的是

redirect是直接改变url中的哈希值，而component只是规定在对应的path下应该显示什么组件

new Vue({
        el:"#app",
        router:route,
        components:{
            regist:"regist",
        }
    })

router-view

显示路由中，comonent的容器，没有这个那么无法显示路由中的组件

路由跳转

方式一 router-link

<router-link to="/login">登录</router-link>
    <router-link to="/regist">注册</router-link>

方式二 this.$router.push("/path/params")
使用一个事件实现push跳转

使用query方式传值

可以使用this.$route拿到路由对象

路由对象的query数组对象记录着所有在哈希值后面以？号拼接的参数

所以可以使用this.$route.query.参数名获取参数的值

<router-link to="/login?id=2">登录</router-link>
 new Vue({
        el:"#app",
        router:route,
        components:{
            regist:"regist",
        },
        created(){   
            alert(this.$route.query.id)
        }
    })
//弹出2

传递多个值

多个值之间用&号拼接

<router-link to="/login?id=2&name=lili">登录</router-link>

alert(this.$route.query.id),
alert(this.$route.query.name)

第一个弹出2
第二个弹出lili

使用params方式传值

在路由的path后面添加参数

var route=new VueRouter({   
            {path:"/regist/:id/:name",component:login},//component的参数是一个组件对象，不能是一个引用名称:'login'
        ]
    })

这时url跟着login的第一个值就是id的值，第二个就是name的值

<router-link to="/regist/2/lili">注册</router-link>

通过this.$route.params.id获取id的值2

通过this.$route.params.name获取name的值lili

children实现路由嵌套

当在一个组件中要实现路由功能时，就需要使用children实现嵌套

在需要嵌套的的routes中添加children

下面示例中登录组件中需要嵌套两个路由，分别时qq登录和邮箱登录

var route=new VueRouter({
        routes:[
            {path:"/",redirect:"/login"},//改变哈希值
            {
                path:"/login",
                component:login,
                children:[
                    {path:"email",component:email},
                    {path:"qq",component:qq}
                ]
            },//component的参数是一个组件对象，不能是一个引用名称:'login'
            {path:"/regist/:id/:name",component:regist}
        ]
    })

并且需要在login组件中设置router-link和router-view

var login= Vue.component('login',{
        template:"#login"})

<template id="login">
    <div>
        <div>登录</div>
        <router-link to="/login/email">邮箱登录</router-link>
        <router-link to="/login/qq">QQ登录</router-link>
        <router-view></router-view>
    </div>
</template>

完整示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
    <router-link to="/login?id=2&name=lili">登录</router-link>
    <router-link to="/regist/2/lili">注册</router-link>
    <router-view></router-view>
</div>
<!--嵌套路由-->
<template id="login">
    <div>
        <div>登录</div>
        <router-link to="/login/email">邮箱登录</router-link>
        <router-link to="/login/qq">QQ登录</router-link>
        <router-view></router-view>
    </div>
</template>
</body>
</html>
<script>
    var regist={
        template: "<div>注册</div>"
    }

   var login= Vue.component('login',{
        template:"#login"})
    var email= Vue.component('email',{
        template:"<div>邮箱登录</div>"})
    var qq= Vue.component('qq',{
        template:"<div>QQ登录</div>"})
    var route=new VueRouter({
        routes:[
            {path:"/",redirect:"/login"},//重定向改变哈希值
            {
                path:"/login",
                component:login,
                children:[
                    {path:"email",component:email},
                    {path:"qq",component:qq}
                ]
            },//component的参数是一个组件对象，不能是一个引用名称:'login'
            {path:"/regist/:id/:name",component:regist}
        ]
    })

    new Vue({
        el:"#app",
        router:route,
        components:{
            regist:"regist",
        },
        mounted(){
        }
    })
</script>