vue-router 的安装和基本应用(1)

最新推荐文章于 2025-04-08 09:21:42 发布

原创最新推荐文章于 2025-04-08 09:21:42 发布 · 150 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue.js

实训笔记专栏收录该内容

18 篇文章

订阅专栏

vue-router是Vue.js的官方路由插件，用于实现单页面应用的路由管理。通过它，我们可以根据路由动态加载组件。安装vue-router可以选择CDN或npm，入门学习推荐使用CDN。基本应用包括组件定义、路由定义、组件注册和模板内容。在跳转时，可以使用`router-link`配合`to`属性或`:to`属性（需在data中定义）进行路由跳转。

vue-router是vue的一个插件，用来提供路由功能。通过路由的改变可以动态加载组件，达到开发单页面程序的目的。

安装

可以使用cdn在线导入在线资源，也可以使用npm模块的方式安装vue-router，现阶段我们入门学习的使用cdn。。

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.3/vue-router.min.js"></script>

基本应用

基本应用分为四部

组件定义
路由定义
组件注册
模板内容

例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.3/vue-router.min.js"></script>
    <script>
        window.onload = function() {
            //1.组件定义

            var student = {
                template: `
                <div >
                    <h1>student</h1>
                    </div>`
            };
            var teacher = {
                template: `
                <div >
                    <h1>teacher</h1>
                    </div>`
            };
            var user = {
                template: `
                <div >
                    <h1>user</h1>
                    </div>`
            };
            //2.定义路由
            var router = new VueRouter({
                routes: [{
                        path: '/student',
                        //定义路径
                        component: student,
                        //这里写的是上面已经定义好的组件名称
                    }, {
                        path: '/teacher',
                        name: 'teacer',
                        component: teacher,


                    }, {
                        path: '/user',
                        component: user,
                    }

                ]
            });
            //3.组件注册
            new Vue({
                el: "#app",
                router,
                //在组件中注册上面已经定义的路由
                data() {
                    return {
                        student: {
                            path: '/student'
                        }
                    }
                },
                methods: {},

            })
        }
    </script>
</head>

<body>
    <!-- 4.在模板中写入内容 -->
    <div id="app">
        <h1>点击链接跳转界面</h1>
        <router-link :to="student">跳转到学生</router-link>
        <router-link to="/teacher">跳转到教师</router-link>
        <router-link to="/user">跳转到用户</router-link>
        <!-- 定义一个用来装路由界面的容器 -->
        <div id="content">
            <router-view></router-view>
        </div>


    </div>
</body>

</html>

注意：

在跳转时可以使用
router-link to="（路由地址）"跳转

<router-link to="/teacher">跳转到教师</router-link>

也可以使用
router-link :to="（在data中定义的名字）"跳转

<router-link :to="student">跳转到学生</router-link>

这时我们需要在对应的vue组件data中声明路由地址

new Vue({
                el: "#app",
                router,
                //在组件中注册上面已经定义的路由
                data() {
                    return {
                        student: {
                            path: '/student'
                        }
                    }
                },
                methods: {},

            })
        }