vue-router：路由传参

最新推荐文章于 2024-04-11 02:28:33 发布

程序媛-jjl

最新推荐文章于 2024-04-11 02:28:33 发布

阅读量554

点赞数

分类专栏： Vue.js 文章标签： vue-router 具名路由路径传参数

本文链接：https://blog.csdn.net/m0_37479246/article/details/79148248

版权

Vue.js 专栏收录该内容

18 篇文章 6 订阅

订阅专栏

在设置路由规则时，我们可以给路径名设置一个别名，方便进行路由跳转，而不需要去

记住过长的全路径。例如：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>routerTest1</title>
    <c:import url="importFile.jsp"></c:import>
</head>
<body>
<div id="app">
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Brand</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <%--定义跳转的路径--%>
                    <li class="active"> <router-link to="/home">Home</router-link></li>
                    <li> <router-link to="/list">List</router-link></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container">
        <!—路由切换组件template 插入的位置 -->
        <router-view></router-view>
    </div>
</div>
<template id="users">
    <div class="container">
        <h1> this is list page----{{$route.path}}</h1>
        <h2>用户信息</h2>
         <router-link to="/list/user/001">用户{{$route.params.id}}</router-link>
        <router-link to="/list/user/002">用户{{$route.params.id}}</router-link>
    </div>
</template>

<script type="x-template" id="modalTel">
    <div>
        <h1> this is home page </h1>
        <div>
            <ul >
                <li>
                    <router-link to="/home/lists">List</router-link>
                </li>
                <li>
                    <router-link to="/home/detail">Detail</router-link>
                </li>
            </ul>
        </div>
        <router-view></router-view>
    </div>

</script>
<script>

    /*
     * var Home = Vue.extend({
     template:'<h1> this is home page </h1>',
     })
     * */
    /*使用Javascript模板定义组件*/
    var Home = Vue.extend({
        template:'#modalTel'
    })

    /*创建路由器实例*/
    const router = new VueRouter({
        routes:[
            { path: '/', redirect: '/home' },
            {
                path:'/home',
                component:Home,
                /*嵌套下的路由（子路由）*/
                children:[
                    {
                        path:'/home/lists',
                        component:{
                            template:'<h1> this is lists pages</h1>'
                        },

                    },
                    {
                        path:'/home/detail',
                        component:{
                            template:'<h1> this is detail pages</h1>'
                        },
                    }
                ]
            },
            {
                path:'/list',
                component:{
                    /*显示路由的属性*/
                    template:'#users',
                },
            },
            {
                path:'/list/user/:id',
                component:{
                    template: '<h3>用户Id{{$route.params.id}} </h3>'
                }
            }
        ]
    });
    const app = new Vue({
        router:router
    }).$mount('#app')
</script>
</body>
</html>

上文中的 importFile,jsp 在上一篇路由基本用法中介绍过了，就是引入需要的文件。 http://blog.csdn.net/m0_37479246/article/details/79146951 ；