Vue.js路由详解

qq讨论群：313032825
本人做了一个微信公众号，用于分享各类视频学习资源和我多年学习经验，喜欢的可以关注哦！
公众号图片

有时候，我们在用vue的时候会有这样的需求，比如一个管理系统，点了左边的菜单栏，右边跳转到一个新的页面中，而且刷新的时候还会停留在原来打开的页面。

又或者，一个页面中几个不同的画面来回点击切换，这两种情况都可以用vue router路由来解决，本文假设读者已经了解vue.js的基本知识，例如模板等

 我的做法是先跟着代码敲一遍看到效果，再讲解各个原因

1，引入js文件

<script src="https://cdn.bootcss.com/vue/2.4.0/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/2.4.0/vue-router.js"></script>

2，代码

复制代码
<body>
<div id="app">
    <div>
        <!--
            router-link to属性就是指向某个具体的链接，链接的内容会被渲染到router-view标签中
            router-link会被渲染成a标签，例如第一个会变成<a href="#/first">第一个页面</a>,前面加了个#
        -->
        <router-link  to="/first">第1个页面</router-link>
        <router-link  to="/second">第2个页面</router-link>
        <router-link  to="/third">第3个页面</router-link>
    </div>
    <router-view></router-view>
</div>
</body>
<script>
    /*
    * 申明三个模板
    */
    var first = { template: '<p>this is first page</p>' };
    var second = { template: '<p>this is second page</p>' };
    var third = { template: '<p>this is third page</p>' };
    /*
    * 定义路由，component属性是通过 Vue.extend() 创建的组件构造器，或者，只是一个组件配置对象。
    */
    var routes = [
        { path: '/first', component: first },
        { path: '/second', component: second },
        { path: '/third', component: third }
    ];
    /*
    * 创建VueRouter实例
    */
    var router = new VueRouter({
        routes:routes
    });
    /*
    * 给vue对象绑定路由
    * .$mount("#app")手动挂载，用来延迟挂载，跟
    *  const app = new Vue({
    *   el:"#app"
    *   router
    * });
    * 效果是一样的
    */
    const app = new Vue({
        router
    }).$mount("#app");

</script>
复制代码


效果图

这个时候就基本实现了功能，点击几个按钮上面的地址会发生变化，并且router-view里面会被渲染成对应的内容。并且刷新页面不会跳到首页

运行步骤：

　　1，当router-link对应的标签被点击时，比如此时点击第二个，to的值是/second,那么实际的地址就是当前页面地址+#/second。

　　2，Vue会找到当前vue实例的路由里的routes里面path为/second的路由。

　　3，会将找到的这一行记录的模板component渲染到router-view里面。

 

 

 

redirct重定向

 在routes数组里面添加

{ path: '/', redirect: '/first'},

当打开页面时候，会自动重定向到第一个中.

 

 

tag

router-link默认会被渲染成a标签

我们可以加上tag="li"就会被渲染成li标签

 

 

active-class

router-link标签被选中时候会默认给选中的元素添加.router-link-active属性，我们可以通过设置active-class设置被选中后添加的class样式

 

posted @   nfcm  阅读(12266)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示