vue路由的两种方式,vue路由实现模式
本文主要介绍了Vue的三种路由模式的总结，具有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。
目录
路由模式分析1 .哈希模式2 .历史模式3 .抽象模式路由三个基本概念：在vue或相对简单的vue-cli中实现路由创建一个项目来体验和安装vue-router。
路由模式解析
这里说一下vue-router的路由方式，首先要知道的是，路由是由多个URL组成的，不同的URL可以相应的导航到不同的位置。如果你做过服务器开发或者对http协议有所了解，你就会知道浏览器中对页面的访问是无状态的，所以我们在切换不同页面时都会提出新的请求。
其实用vue和vue-router开发的时候你会明白，页面切换的时候，没有页面的重新请求或者重新刷新，就像页面有状态一样使用。原因是什么？
其实这是借助浏览器的历史API来实现的，历史API可以让页面跳转而无需刷新，页面的状态在浏览器中得到维护。
1.hash模式
用URL的hash来模拟一个完整的URL，这样当URL改变时，页面不会重新加载，显示的网络路径会有一个“#”，有点难看。这是最安全的模式，因为它兼容所有浏览器和服务器。
2.history模式
美化后的哈希模式会去掉路径中的“#”。要看Html5的历史，pushState API，所以我感觉不用担心IE9和下一个版本。它还包括三个方法：back、forward和go，分别对应于浏览器的前进、后退和跳转操作。就是浏览器左上角前进后退按钮的操作。
history . go(-2)；//返回两次
history . go(2)；//前进两次
history . back()；//后退
h story . forward()；//前进
但是，历史也有缺点，因为它害怕前进和后退，它害怕刷新(如果后端没有准备好)，因为刷新实际上是请求服务器。
总结一下
哈希模式(vue-路由器默认模式URL后跟#)使用URL的哈希值作为路由，支持所有浏览器。缺点：只有改变下面的#才能实现路由跳转。历史模式(由模式：“历史”改为历史模式)HTML5 (BOM)历史API和服务器配置缺点：怕刷新。如果后端不处理这种情况，前端刷新实际上是在请求服务器，需要很多时间，仍然很慢。
3.abstract模式
适用于所有JavaScript环境，比如在服务器端使用Node.js。如果没有浏览器API，路由器将自动强制进入此模式。
然后
const router=new vue router({ routes，mode:hashhistoryabstract ，})
换到这里。
路由三个基本概念
路由中有三个基本概念：路由、路由、路由器。
Route是一个路由，从这个英文单词可以看出，它是单数，Home button=home content，它是一个路由，about button=about content，它是另一个路由。路由是一组路由。将上述每条路线组合成一个数组。[{home button=home content}，{ about button=about content }]路由器是一种机制，相当于一个管理者，管理路由。因为routes只定义了一组路由，所以它的位置是静态的。当用户单击主页按钮时，路由器会在路由中搜索以找到相应的主页内容，因此主页内容会显示在页面上。客户端中的路由实际上是dom元素的显示和隐藏。当主页内容显示在页面上时，“关于”中的所有内容都是隐藏的，反之亦然。实现客户端路由有两种方式：基于hash和基于html5 history api。
Router-view:主要用于构建SPA(单页应用)时渲染你指定路由对应的组件。你可以把router-view想象成一个容器，它呈现的组件是你用vue-router指定的。
vue中实现路由还是相对简单的
因为我们页面中的所有内容都是组件化的，所以我们只需要将路径对应到组件，然后在页面中呈现组件。
1.页面实现（html模版中）
在vue-router中，我们看到它定义了两个标签router-link和router-view，分别对应于点击和显示部分。Router-link定义页面的点击部分，router-view定义显示部分，即点击后显示区域内容的位置。所以router-link还有一个很重要的属性to，定义了点击后去哪里，比如router-link to=/home home/router-link。
2. js 中配置路由
首先定义路线，实施路线。它是一个对象，由两部分组成：路径和组件。路径指路径，组件指组件。例如{path:/home ，component: home}
这里我们有两条路线，它们组成了一条路线：
常量路由=[
{ path:“/Home”，组件：Home }，
{路径：“/about”，组件：About }
]
最后，创建路由器来管理路由，它是由构造函数new vueRouter()创建的，并接受路由参数。
const router=new VueRouter({
Routes //routes: routes for routes。
})
配置完成后，将路由器实例注入vue根实例，就可以使用路由了。
const app=new Vue({
路由器
}).$ mount(“# app”)
执行过程：当用户点击router-link标签时，会寻找其to属性，其to属性与js中配置的path {path:/home ，component: home} path一一对应，从而找到匹配的组件，最终将组件渲染到router-view标签所在的地方。的所有这些实现都基于哈希。
vue-cli创建一个项目体验一下， 安装vue-router
1.在src 目录下新建两个组件
Home.vue和about.vue
模板
差异
h1主页/h1
p{{msg}}/p
/div
/模板
脚本
导出默认值{
data () {
返回{
消息：“我是一个家庭成员”
}
}
}
/脚本
模板
差异
h1关于/h1
p{{aboutMsg}}/p
/div
/模板
脚本
导出默认值{
data () {
返回{
AboutMsg:“我是一个about组件”
}
}
}
/脚本
2.在 App.vue中 定义router-link 和 /router-view
模板
div id=应用程序
img src=。/assets/logo.png
页眉
！- router-link定义单击后要导航到的路径-
路由器链接到=/home home/路由器链接
路由器链接到=/about about/路由器链接
/页眉
！-相应的组件内容呈现在路由器视图中-
路由器视图/路由器视图
/div
/模板
脚本
导出默认值{
}
/脚本
3.在 src目录下再新建一个router.js 定义router
是定义路径到组件的映射。
从“Vue”导入Vue；
从“vue-router”导入VueRouter
//引入组件
从导入主页。/home . vue ；
从导入关于。/about . vue ；
//告诉vue使用vueRouter
vue . use(vue router)；
常量路由=[
{
路径：“/home”，
组件：主页
},
{
路径：“/about”，
组件：关于
}
]
var router=new VueRouter({
路线
})
导出默认路由器；
4.把路由注入到根实例中，启动路由
其实这里还有一个方法。就像将vuex store注入根实例一样，我们也可以将vueRouter直接注入根实例。Route被引入main.js并注入到根实例中。
从“vue”导入Vue
从导入应用程序。/App.vue
//传入路由
从导入路由器。/router.js
新Vue({
埃尔： #app ，
路由器//被注入到根实例中
render: h=h(App)
})
5.这时点击页面上的home 和about 可以看到组件来回切换
但是有一个问题。当您第一次进入页面时，页面中没有显示任何内容。这是因为当我们第一次进入页面时，它的路径是/，我们没有相应地配置这个路径。
一般来说，页面一加载就显示主页，我们必须将这个路径指向home组件。但是如果我们写{path:/，component: home}，Vue会报错，因为两条路径指向同一个方向。
我该怎么办？这需要被重定向。所谓重定向，就是给它重新分配一个方向。它原本是一条通路/路径。当我们重新指向“/home”时，就相当于访问“/home”。相应地，主页组件将显示在页面上。重定向在vueRouter中用于定义重定向。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。