vue路由之replace

最新推荐文章于 2025-06-13 09:50:14 发布

第三种人i

最新推荐文章于 2025-06-13 09:50:14 发布

阅读量5.3k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_60375943/article/details/121106391

本文介绍了单页Web应用(SPA)的概念及优势，并详细讲解了使用Vue.js与Vue-router实现SPA的方法，包括组件定义、路由配置及导航组件的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. SPA是什么

单页Web应用（single page application，SPA），就是只有一个Web页面的应用，
是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序

单页面应用程序：
只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中
传统多页面应用程序：
对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面

优势
减少了请求体积，加快页面响应速度，降低了对服务器的压力
更好的用户体验，让用户在web app感受native app的流畅

2.SPA实现思路和技术点

1 ajax
2 锚点的使用（window.location.hash #）
3 hashchange 事件 window.addEventListener("hashchange",function () {})
4 监听锚点值变化的事件，根据不同的锚点值，请求相应的数据
5 原本用作页面内部进行跳转，定位并展示相应的内容

3.路由思路

1、确保引入Vue.vue-router的js依赖
2、首先需要定义组件（就是展示不同的页面效果）
3、需要将不同的组件放入一个容器中（路由集合）
4、将路由集合组装成路由器
5、将路由挂载到Vue实例中
6、定义锚点
7、跳转

4.通过vue的路由可实现多视图的单页Web应用(基于html的SPA)

① 引入依赖库

<script src="js/vue.js"></script>

<script src="js/vue-router.min.js"></script>

②创建自定义组件，例如：Home和Abort组件

const Home = Vue.extend({});

注1：extend是构造一个组件的语法器. 你给它参数，他给你一个组件,然后这个组件
你可以作用到Vue.component这个全局注册方法里，也可以在任意vue模板里使用car组件

注2：也可以用以前的方式创建和获得组件，效果也是一样的
Vue.component("button-counter", {...});//创建组件
var ButtonCounter = Vue.component('button-counter');//获得组件

③定义路由(即路线)

var routes = [{path: ‘/about’,component: About}];

注1：根路径“/”

④创建路由器实例,然后传 `routes` 配置

const router = new VueRouter({routes:routes});

注1：route和router的区别 route：

路线 router：路由器路由器中包含了多个路线

⑤创建和挂载根实例

var vm = new Vue({router: router}).$mount(’#app’);

⑥前面使用RouterLink和RouterView组件导航和显示

<router-link to="/home">go to Home</router-link>

<router-view></router-view>

5.router-link相关属性

表示目标路由的链接
<router-link to="/home">Home</router-link>
<router-link v-bind:to="'home'">Home</router-link>

append

<router-link :to="{ path: 'relative/path'}" append></router-link>

<router-link>

<router-link to="/foo" tag="li">foo</router-link>

<li>foo</li>

active-class

设置链接激活时使用的 CSS 类名。可以通过以下代码来替代

exact-active-class

配置当链接被精确匹配的时候应该激活的 class。可以通过以下代码来替代。

event

<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>

案例（首页&关于本站）

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>路由</title>
       
       <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
       
       <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.1.2/vue-router.js"></script>
   </head>
   <body>
       
       <div id="app">
           
           <router-link to="/Home">首页</router-link>
           <router-link to="/Abort">关于本站来了</router-link>
           
           <router-view></router-view>
       </div>
   </body>
   <script type="text/javascript">
       // 2、定义两个组件
       const Home = Vue.extend({
           template: '<div><p>首页</p><div>博主，所写博客内容</div></div>'
       });

       const Abort = Vue.extend({
           template: '<div><p>关于本站</p><div>博主相关信息，运营内容</div></div>'
       });
       //3、添加URL与组件的映射关系（组合路由）
       let routes = [{
           path: '/',
           component: Home
       }, {
           path: '/Home',
           component: Home
       }, {
           path: '/Abort',
           component: Abort
       }]
       //4、将路由的集合组合成路由器
       const router = new VueRouter({
           routes
       });

       // 绑定边界 Es6的具体体现
       new Vue({
           el: '#app',
           //5、挂载路由
           router,
           data() {
               return {
                   msg: '----vue----'
               };
           }
       })
   </script>
</html>

结果

无痕浏览

链接: vue路由案例测试.

replace：类似于无痕浏览，清空历史记录只要点击/Abort组件,那么/Home组件就会被清空，当你点返回时，那么只返回/Abort存在的内容，/Home被踢出去了