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>

巴特西

vue学习路由嵌套

1. 路由嵌套和参数传递

路由实例

完整示例代码

最新文章

热门文章