Vue第二部分(4)：嵌套路由和路由传参

最新推荐文章于 2023-03-30 18:58:16 发布

CSDN专家-微编程

最新推荐文章于 2023-03-30 18:58:16 发布

阅读量225

点赞数

分类专栏： Vue相关知识学习文章标签： vue javascript vue.js html

本文链接：https://blog.csdn.net/technologist_28/article/details/119698449

版权

Vue相关知识学习专栏收录该内容

14 篇文章 3 订阅

订阅专栏

嵌套路由

实际生活中的应用界面，通常由多层嵌套的组件组合而成。当我们路由到某一个组件后，还经常需要在该组件中继续路由到其子组件，这就需要使用Vue的嵌套路由。比如：当我们路由到登录组件后，又分为手机验证码登录和账户名密码登录 2个子组件。
在这里插入图片描述

语法：
const 子组件 = {
    template:"子组件标签"
}


const 父组件 = {
    tempalate:`
		<router-link to="/父组件路径/子组件的路径">链接1</router-link>
		<router-view></router-view>
	`
}

const router = new VueRouter({
    routes:[
        {
            path:"/组件路径",
            component:父组件对象,
            children:[//设置子路由信息
                {
                    path:"子组件路径",//  通常不以/开头
                    component:子组件
                }
            ]
        }
    ]
})

示例

<body>
    <div id="app">
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>
        <hr>
        <router-view></router-view>
    </div>

    <template id="phone-login-form">
        <form action="">
            手机号: <input type="number" name="phone" > <br>
            验证码: <input type="password" name="code"> <br>
            <input type="submit" value="登录">
        </form>
    </template>
    <template id="account-login-form">
        <form action="">
            用户名: <input type="text" name="username" > <br>
            密码: <input type="password" name="pwd"> <br>
            <input type="submit" value="登录">
        </form>
    </template>
    <template id="register-form">
        <form action="">
            用户名: <input type="text" name="username" > <br>
            密码: <input type="password" name="pwd1"> <br>
            确认密码: <input type="password" name="pwd2" > <br>
            <input type="submit" value="注册">
        </form>
    </template>

    <script>
        const registerForm = {
            template:"#register-form"
        }

        const phoneLogin = {
            template:"#phone-login-form"
        }
        const accountLogin = {
            template:"#account-login-form"
        }

        const loginForm = {
            template:`
                <div>
                    <router-link to="/login/phone">手机验证码登录</router-link>
                    <router-link to="/login/account">用户名密码登录</router-link> <br> <br>
                    <router-view></router-view>
                </div>
            `
        }

        const router = new VueRouter({
            routes:[
                {path:"/",redirect:"/register"},
                {path:"/register",component:registerForm},
                {
                    path:"/login",
                    component:loginForm,
                    children:[
                        {path:"phone",component:phoneLogin},
                        {path:"account",component:accountLogin}
                    ]
                }
            ]
        })

        const vm = new Vue({
            el:"#app",
            router
        })
    </script>
</body>

路由组件传参

通过路由导航到组件时，有时需要传递参数。

1.query传参

<div id="app">
    <router-link to="/user?name=李栓蛋&age=38">用户管理</router-link>
    <router-link :to="{path:'/user',query:{name:'王花花',age:28}}">用户管理</router-link>
    <router-view></router-view>
</div>
<script>
    const user = {
        template:`<div>
                    <div>我叫{{$route.query.name}}</div>
                    <div>今年{{$route.query.age}}</div>
                </div>`
    }

    const router = new VueRouter({
        routes:[
            {path:"/user",component:user}
        ]
    })

    const vm = new Vue({
        el:"#app",
        router
    })
</script>

2.params传参

<div id="app">
     <router-link to="/product/macbookair">商品1</router-link>
     <router-link :to="{name:'product',params:{name:'macbookpro'}}">商品2</router-link>		<router-view></router-view>
</div>
<script>
    const product = {
        template:`<div>
					<div>商品名：{{$route.params.name}}</div>  
                </div>`
    }
	//通过:参数名的方式匹配数据
    const router = new VueRouter({
        routes:[
            {name:"product",path:"/product/:name",component:product}
        ]
    })

    const vm = new Vue({
        el:"#app",
        router
    })
</script>

CSDN专家-微编程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue第二部分(4)：嵌套路由和路由传参

嵌套路由实际生活中的应用界面，通常由多层嵌套的组件组合而成。当我们路由到某一个组件后，还经常需要在该组件中继续路由到其子组件，这就需要使用Vue的嵌套路由。比如：当我们路由到登录组件后，又分为手机验证码登录和账户名密码登录 2个子组件。语法：const 子组件 = { template:"子组件标签"}const 父组件 = { tempalate:` <router-link to="/父组件路径/子组件的路径">链接1</router-link&g
复制链接

扫一扫