阶段二-vue路由的综合案例

最新推荐文章于 2024-06-01 15:46:07 发布

.超人不会飞.

最新推荐文章于 2024-06-01 15:46:07 发布

阅读量254

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45732755/article/details/127809742

版权

案例效果

一、创建路由对象

1.1、首页路由

<template id="template_indexpage">
    <div>
        <h1>欢迎使用xxx管理系统</h1>
    </div>
</template>

1.2、用户管理页路由

<template id="template_user">
    <div>
        <h1>用户管理系统</h1>
        <h3>模拟用户列表</h3>
        <router-link to="/user_update?id=100">修改用户</router-link>
    </div>
</template>

1.3、添加用户页路由

<template id="template_user_add">
    <div>
        <h1>添加用户</h1>
        <router-link to="/user_list">保存用户</router-link>
    </div>
</template>

二、创建模板对象

var userListTemplate = {
    template: '#template_user'
}
var userAddTemplate = {
    template: '#template_user_add'
}
var indexPage = {
    template: '#template_indexpage'
}

三、创建VueRouter对象，应用模板

var router = new VueRouter({
    routes:[
        {path: '/index', component: indexPage},
        {path: '/user_list', component: userListTemplate},
        {path: '/user_add', component: userAddTemplate}
    ]
});

四、使用router-link切换路由（跳转）

<router-link to="/index">首页</router-link><br/>
<router-link to="/user_list">用户列表</router-link><br/>
<router-link to="/user_add">添加用户</router-link>

五、使用router-view显示路由切换后的模板

<router-view></router-view>

六、完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/vue-router.min-2.7.0.js"></script>
</head>
<body>
    <template id="t1">
        <div style="width: 1000px; height: 200px; background-color: yellow; text-align: center; font-size: 36px; line-height: 200px">
            你没猜错，这是一个广告位
        </div>
    </template>
    <template id="t2">
        <div style="width: 200px; height: 600px; background-color: gray; line-height: 50px;text-align: center;font-size: 18px; float: left">
            <router-link to="/index">首页</router-link><br/>
            <router-link to="/user_list">用户列表</router-link><br/>
            <router-link to="/user_add">添加用户</router-link>
        </div>
    </template>
    <template id="t3">
        <div style="width: 800px; height: 600px; border: 1px solid black; float: left">
            <router-view></router-view>
        </div>
    </template>
    <template id="template_user">
        <div>
            <h1>用户管理系统</h1>
            <h3>模拟用户列表</h3>
            <router-link to="/user_update?id=100">修改用户</router-link>
        </div>
    </template>
    <template id="template_user_add">
        <div>
            <h1>添加用户</h1>
            <router-link to="/user_list">保存用户</router-link>
        </div>
    </template>
    <template id="template_user_update">
        <div>
            <h1>修改用户</h1>
            <p>
                列表页传参：id={{this.$route.query.id}}
            </p>
            <router-link to="/user_list">修改用户</router-link>
        </div>
    </template>
    <template id="template_indexpage">
        <div>
            <h1>欢迎使用xxx管理系统</h1>
        </div>
    </template>
    <div id="app">
        <div style="width: 1002px; margin-left: auto;margin-right: auto;">
            <hello_top></hello_top>
            <hello_left></hello_left>
            <hello_right></hello_right>
        </div>
    </div>
    <script>
        Vue.component('hello_top',{
            template: '#t1'
        })
        Vue.component('hello_left',{
            template: '#t2'
        })
        Vue.component('hello_right',{
            template: '#t3'
        })

        var userListTemplate = {
            template: '#template_user'
        }
        var userAddTemplate = {
            template: '#template_user_add'
        }
        var userUpdateTemplate = {
            template: '#template_user_update'
        }
        var indexPage = {
            template: '#template_indexpage'
        }
        var router = new VueRouter({
            routes:[
                {path: '/index', component: indexPage},
                {path: '/user_list', component: userListTemplate},
                {path: '/user_add', component: userAddTemplate},
                {path: '/user_update', component: userUpdateTemplate}
            ]
        });
        new Vue({
            el: '#app',
            router: router,
            created: function () {
                this.$router.push("index") //默认切换到首页路由
            }
        })
    </script>
</body>
</html>