vue-router的基本使用_vue-router占位-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_51811318/article/details/116500241

vue-router的基本使用

介绍

它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器，推荐使用
官网：https://router.vuejs.org/zh/

基本使用步骤

1导入js文件
2.添加路由链接
3.添加路由占位符(最后路由展示的组件就会在占位符的位置显示)
4.定义路由组件
5.配置路由规则并创建路由实例
6.将路由挂载到Vue实例中

1.导入js文件

1.1如果不想下载可以用网链接的形式

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

1.2根据自己的js路径来写

 <script src="lib/vue_2.5.22.js"></script>
 <script src="lib/vue-router_3.0.2.js"></script>

2.添加路由链接

<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- router-link是vue提供的标签 默认会被渲染为a标签 -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/user">User组件</router-link>
<router-link to="/register">Register组件</router-link>

3.添加路由占位符

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

<!-- 路由填充位（也叫做路由占位符） -->
<!-- 将来通过路由规则匹配到组件 会被渲染到这个位置 -->
<router-view></router-view>

4.定义路由组件

<script>
var User = {
            template: `<div>User</div>`
        }
var Register = {
            template: `<div>Rwgister</div>`
        }
</script>

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

<script>
 var router = new VueRouter({
            // router是路由规则数组
            routes: [
                // 每个路由规则都是一个配置对象 其中至少包含path和component两个属性
                // path表示当前路由规则匹配的hash地址
                // component表示当前路由对应的展示的组件
                { path: '/user', component: User },
                { path: '/register', component: Register },
            ]
        })
</script>

6.将路由挂载到Vue实例中

<script>
 new Vue({
            el: '#app',
            router
        })
</script>

例子代码如下

点击User展示User的组件
点击Register展示Register组件
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入js文件 -->
    <script src="lib/vue_2.5.22.js"></script>
    <script src="lib/vue-router_3.0.2.js"></script>
</head>

<body>

    <div id="app">
        <!-- 2.添加路由连接 -->
        <router-link to="/user">User</router-link>
        <router-link to="/register">Register</router-link>
        <!--3.添加占位符  -->
        <!-- 路由填充位（也叫做路由占位符） -->
        <!-- 将来通过路由规则匹配到组件 会被渲染到这个位置 -->
        <router-view></router-view>
    </div>
    <script>
        var User = {
            template: `<div>User组件</div>`
        }
        var Register = {
            template: `<div>Rgister组件</div>`
        }
        var router = new VueRouter({
            // router是路由规则数组
            routes: [
                // 每个路由规则都是一个配置对象 其中至少包含path和component两个属性
                // path表示当前路由规则匹配的hash地址
                // component表示当前路由对应的展示的组件
                { path: '/user', component: User },
                { path: '/register', component: Register },
            ]
        })
        new Vue({
            el: '#app',
            router
        })
    </script>
</body>
</html>