Vue-Router的基本使用

最新推荐文章于 2023-05-08 16:47:21 发布

米咪米

最新推荐文章于 2023-05-08 16:47:21 发布

阅读量177

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/weixin_52063946/article/details/119981970

版权

Vue.js Vue Router 路由配置组件路由规则

关键词由CSDN通过智能技术生成

Vue.js 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

1、引入相关的库文件

2、添加路由连接 Router-Link

3、添加路由占位符 Router-View

4、定义路由组件

5、创建路由实例并配置路由规则

6、将路由实例挂载到vue根组件中

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- 导入 vue 文件 ，这两个文件引入顺序不能颠倒-->
    <script src="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
</head>

<body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
        <!-- to属性默认会被渲染为href属性 -->
        <!-- to属性的值会被默认渲染为#开头的hash地址 -->
        <!-- 添加路由连接 -->
        <router-link to="/user">User</router-link>
        <router-link to="/Register">Register</router-link>


        <!-- 路由占位符也称路由填充位 -->
        <!-- 作用：将来通过路由规则匹配到的组件，将会被渲染到router-view所在的位置 -->
        <router-view></router-view>
    </div>

    <script>
        // 定义路由组件
        const User = {
            template: '<h1>User 组件</h1>'
        }

        const Register = {
            template: '<h1>Register 组件</h1>'
        }

        // 创建路由实例对象
        const router = new VueRouter({
            // 所有的路由规则
            // routes是路由规则数组（以下表示定义了两个路由规则）
            routes: [{
                // path表示当前路由规则匹配的hash地址，一一对应之前写的to属性里的地址
                path: '/user',
                // component 表示当前路由规则对应要展示的组件
                component: User
            }, {
                path: '/register',
                component: Register
            }]
        })

        // 创建 vm 实例对象
        const vm = new Vue({
            // 指定控制的区域
            el: '#app',
            data: {},
            // 挂载路由实例对象
            // router: router
            router
        })

        // 让vue实例控制网页中的某个区域的过程，称之为挂载
        // 挂载方式：
        // （1）、通过 el:"css选择器" 进行配置 el:"#app"
        // （2）、通过vue实例.$mount(“css选择器”) 进行配置
    </script>
</body>

</html>

米咪米

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-Router的基本使用

1、引入相关的库文件2、添加路由连接 Router-Link3、添加路由占位符 Router-View4、定义路由组件5、创建路由实例并配置路由规则6、将路由实例挂载到vue根组件中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,
复制链接

扫一扫

专栏目录