首页 / VUE / vue-router的基本使用

vue-router的基本使用

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue-router的基本使用，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2708字，纯文字阅读大概需要4分钟。

内容图文

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组件
vue-router的基本使用 - 文章图片

<!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>

内容总结

以上是互联网集市为您收集整理的vue-router的基本使用全部内容，希望文章能够帮你解决vue-router的基本使用所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/987949.html

来源：【匿名】