vue学习路由嵌套

1. 路由嵌套和参数传递

传参的两种形式：
    a.查询字符串：login?name=tom&pwd=123
        {{$route.query}}
       ------ 
        
        <li><router-link to="/user/login?name=wushi&pass=123">用户登录</router-link></li>
        {{$route.query}}
        
    b.rest风格url：regist/alice/456
        {{$route.params}}
        
        
         <li><router-link to="/user/regist/qwe/123">用户注册</router-link></li>
         {{$route.params}}
         
    c.{{$route.path}}
    获取url路径

路由实例

router.push({path:'/home'})  添加路由，功能上与<route-link>相同
router.replace({path:'/home'}) 替换路由，不产生历史记录

完整示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
    <title>Title</title>
</head>
<body>

<div id="app">
    <router-link to="/home">主页</router-link>
    <router-link to="/user">用户</router-link>

    <router-view></router-view>
    <button @click="push">添加路由</button>
    <button @click="push">替换路由</button>
</div>

<template id="user">
    <div>
        <h1>用户信息</h1>
        <ul>
            <li><router-link to="/user/regist/qwe/123">用户注册</router-link></li>
            <li><router-link to="/user/login?name=wushi&pass=123">用户登录</router-link></li>
        </ul>

        <router-view></router-view>
    </div>




</template>

</body>


<script>
    var home={
        template:'<h1>home</h1>'
    };
    var user={
        template:'#user'
    };

    let login={
        template:'<h1>登录中....{{$route.query}}</h1>'
    };
    let regist={
        template:"<h1>注册{{$route.params}}{{$route.path}}</h1>"
    }
    const routes1=[
        {path:'/home',component:home},
        {path:'/user',component:user,
        children:[
            {
            path: 'login',
            component: login,
            },
            {
             path:'regist/:username/:pass',
             component:regist
            }
        ]},
        // {path:'*',redirect:'/home'}
    ];
    const router = new VueRouter({
        routes:routes1,
    });
    new Vue({
        el:'#app',
        router,
        methods:{
            push(){
                router.push({path:'/home'})
            }
        }
    })
</script>



</html>

1. 路由嵌套和参数传递

路由实例

完整示例代码

猜你喜欢