• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

Vue-router的用法与使用步骤

开发技术 开发技术 3周前 (09-07) 24次浏览

Vue-router的使用步骤:

Vue Router的使用步骤还是比较清晰的,按照步骤一步一步就能完成路由操作

A.导入js文件

B.添加路由链接

C.添加路由占位符(最后路由展示的组件就会在占位符的位置显示)

D.定义路由组件

E.配置路由规则并创建路由实例

F.将路由挂载到Vue实例中;

Vue-router的使用方法  代码如下:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入顺序不能乱 -->
    <script src="./vue_2.5.22.js"></script>
    <script src="./vue-router_3.0.2(1).js"></script>
</head>

<body>
    <!-- 被VM实例所控制的区域 -->
    <div id="app">
        <!-- 
                router-link是Vue中提供的标签   默认会被渲染为a标签
                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>regiter 组件</h1>'
        }


        // 创建路由实例对象
        const router = new VueRouter({
            // 所有的路由规则
            routes: [
                // 两个路由规则  每个路由规则都是一个配置对象 其中至少包含path和component两个属性
                // path 表示当前路由规则匹配的hash地址  router-link to里面是谁就要写谁 要一一对应
                // component 表示当前路由规则对应要展示的组件 只接收组件对象、不接受字符串   后面接const常量后面定义的 
                { path: '/user', component: User },
                { path: '/register', component: Register }
            ]
        })

        // 创建VM对象
        const vm = new Vue({
            // 指定控制的区域
            el: '#app',
            data: {

            },
            // 挂载路由实例对象   为了能够让路由规则生效 必须把路由对象挂载到Vue实例对象上
            // router:router
            router
        })
    </script>
</body>

</html>

 


喜欢 (0)