本期视频登录后即可观看
VueJS Routing 路由

18 集视频
1小时38分钟
当前页面链接高亮是常见的编程问题,过去也是在后端服务器进行实现的,Vue 路由系统将这部分功能实在的场景更改为了前端实现.实现起来更为简单,代码也极为优雅.
Bilnap 2023.08.16 04:00
分享一些学习内容😁
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Route</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
    <style>
        
    </style>
</head>

<body>
    <div class="container mt-4">
        <div id="app">
            <h3 class="text-center text-success">{{topic}}</h3>
            <hr />
            <app></app>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3"></script>
</body>
<script>
    let User = {
        template: `
            <div class="p-3">
                <div>User Page</div>
                <ul class="nav nav-tabs nav-stacked">
                    <li class="nav-item">
                        <router-link class="nav-link" :to="{path:'/user/profile'}">User Profile</router-link>
                    </li>
                    <li class="nav-item">
                        <router-link class="nav-link" :to="{path:'/user/posts'}">User Posts</router-link>
                    </li>
                </ul>
                <router-view></router-view>
            </div>
        `,
        mounted() { },
    };

    let UserProfile = {
        template: `
            <div class="mt-2">User Profile Page</div>
        `,
        mounted() { 
            
        },
    };

    let UserPosts = {
        data() {
            return {
                posts: []
            };
        },
        template: `
        <div>
            <div>User Posts</div>
            <div class="list-group p-2">
                <router-link :to="'post/' + post.id" class="list-group-item list-group-item-action" v-for="post in posts" :key="post.id">{{ post.title + ' | Post Id Is:' + post.id}}</router-link>
            </div>
        </div>
    `,
        mounted() {
            this.posts = [
                { id: 1, title: 'this is a post name' },
                { id: 2, title: 'this is a post name' },
                { id: 3, title: 'this is a post name' }
            ];
        },
    };

    let UserPost = {
        props: ["pid"],
        template: `
            <div>
                <div>User Post: {{pid}}</div>
                <button class="btn btn-primary" @click.prevent="back">返回</button>    
            </div>
        `,
        methods:{
            back(){
                this.$router.go(-1)
            }
        },
        mounted() { },
    };

    let Navi = {
        template: `
            <ul class="nav justify-content-center">
                <li class="nav-item">
                    <router-link class="nav-link" :to="{path:'/user'}">User</router-link>
                </li>
            </ul>
        `,
    };

    let App = {
        template: `
          <div>
            <navi></navi>
            <router-view class="card py-4"></router-view>
          </div>

        `,
        components: {
            navi: Navi,
        },
    };

    let Router = new VueRouter({
        linkExactActiveClass:'active',
        routes: [
            {
                path: "/user",
                name: "user",
                component: User,
                children: [
                    { path: 'profile', component: UserProfile },
                    { path: 'posts', component: UserPosts },
                    { path: 'post/:pid', component: UserPost, props: true },
                ]
            }
        ],
    });

    let app = new Vue({
        el: "#app",
        data: {
            topic: "Route",
        },
        router: Router,
        methods: {},
        mounted() { },
        components: {
            app: App,
        },
    });
</script>

</html>
VueJS Routing 路由

微信扫码登录
