什么是vue-router,工作原理是什么
一、vue-router是什么路由就是SPA的路径管理器。vue-router是Vuejs官方的路由插件,它和vuejs是深度集成的,适用于构建单页面应用。vue的SPA是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。路由模块的本质 就是建立起url和页
一、vue-router是什么
- 路由就是用来解析URL以及调用对应的控制器,并返回从视图对象中提取好的网页代码给服务器,最终返回给客户端
- 传统的页面应用,是用一些超链接来实现页面切换和跳转的。而vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。
二、vue-router实现原理(模式)
2.1 Hash模式
vue-router默认hash模式,使用URL的hash来模拟一个完成URL,于是当URL改变时,页面不会重新加载
- hash(#)是URL的锚点,代表的是页面中的也个位置,单单改的是#后的部分,浏览器只会滚动搭到相应的位置,不会重新加载页面,也就是说hash 出现在 URL 中,但不会被包含在 http 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面
- 同时每一次改变#后的部分,都会在浏览器的访问历史中增加一个记录,使用”后退”按钮,就可以回到上一个位置;
- 所以说Hash模式通过锚点值的改变,根据不同的值,渲染指定DOM位置的不同数据。
- hash 模式的原理是 onhashchange 事件(监测hash值变化),可以在 window 对象上监听这个事件。
2.2 History模式
在配置路由规则的时,加入mode:"history"
这种模式充分利用了html5 history interface 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器记录栈,在当前已有的 back、forward、go 基础之上,它们提供了对历史记录修改的功能。只是当它们执行修改时,虽然改变了当前的 URL ,但浏览器不会立即向后端发送请求。
2.3 使用路由模块来实现页面跳转
- 方式1:直接修改地址栏
- 方式2:this.$router.push(‘路由地址’)
- 方式3:
<router-link to="路由地址"></router-link>
三、vue-router使用方式
1:下载 npm i vue-router -S
2:在main.js中引入 import VueRouter from ‘vue-router’;
3:安装插件Vue.use(VueRouter);
4:创建路由对象并配置路由规则 let router = new VueRouter({routes:[{path:’/home’,component:Home}]});
5:将其路由对象传递给Vue的实例,options中加入 router:router
6:在app.vue中留坑<router-view></router-view>
//main.js文件中引入
import Vue from 'vue';
import VueRouter from 'vue-router';
//主体
import App from './components/app.vue';
import Home from './components/home.vue'
//安装插件
Vue.use(VueRouter); //挂载属性
//创建路由对象并配置路由规则
let router = new VueRouter({
routes: [
//一个个对象
{ path: '/home', component: Home }
]
});
//new Vue 启动
new Vue({
el: '#app',
//让vue知道我们的路由规则
router: router, //可以简写router
render: c => c(App),
})
//app.vue留坑
<template>
<div>
<!-- 留坑,非常重要 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
data(){
return {}
}
}
</script>
四、vue-router参数传递
- 声明式导航
<router-link :to='...>
- 编程式导航
router.push(....)
4.1用name传递参数
在路由文件router/index.js配置name属性
router:[
{
path:'/',
name:'index',
component:Index
}
]
模板里(src/App.vue)用$route.name来接收 比如:<p>{{ $route.name}}</p>
4.2 通过 标签中的to传参
基本语法:<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>
- 先在src/App.vue文件中
<router-link :to="{name:'hi1',params:{username:'jspang',id:'555'}}">Hi页面1</router-link>
- 然后把src/router/index.js文件里给hi1配置的路由起个name,就叫hi1.
{path:'/hi1',name:'hi1',component:Hi1}
- 最后在模板里(src/components/Hi1.vue)用
$route.params.username
进行接收
4.3 利用url传递参数----在配置文件里以冒号的形式设置参数。
在/src/router/index.js文件里配置路由
{
path:'/params/:newsId/:newsTitle',
component:Params
}
我们需要传递参数是newsId和newsTitle,所以我们在路由配置文件里制定了这两个值。
在src/components目录下建立我们params.vue组件,也可以说是页面。我们在页面里输出了url传递的的newsId和newsTitle。
<template>
<div>
<h2>{{ msg }}</h2>
<p>新闻ID:{{ $route.params.newsId}}</p>
<p>新闻标题:{{ $route.params.newsTitle}}</p>
</div>
</template>
<script>
export default {
name: 'params',
data () {
return {
msg: 'params page'
}
}
}
</script>
在App.vue文件里加入我们的标签。这时候我们可以直接利用url传值了
<router-link to="/params/198/jspang website is very good">params</router-link>
4.4 使用path来匹配路由,然后通过query来传递参数
<router-link :to="{ name:'Query',query: { queryId: status }}" >
router-link跳转Query
</router-link>
//路由配置
{
path: '/query',
name: 'Query',
component: Query
}
//获取参数
this.$route.query.queryId
五、配置子路由
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
children: [
{path: '/h1', name: 'H1', component: H1},//子路由的<router-view>必须在HelloWorld.vue中出现
{path: '/h2', name: 'H2', component: H2}
]
}
]
六、$route
和$router
的区别
6.1 $route 是“路由信息对象”
包括 path,params,hash,query,fullPath,matched,name 等路由信息参数。
- path:字符串,对应当前路由的路径,解析为绝对路径
- query:一个对象,表示URL查询参数。若无参数则为空对象
- hash:当前路由的hash值(无#)。入伍则空字符串
- fullpath:完全解析后的url,包含查询参数、hash的完全路径
- name:当前路径的名字
6.2 $router 是“路由实例”对象
即使用 new VueRouter创建的实例,包括了路由的跳转方法,钩子函数等。
-常见跳转方法
<button @click="goToMenu" class="btn btn-success">Let's order!</button>
.....
<script>
export default{
methods:{
goToMenu(){
this.$router.go(-1)//跳转到上一次浏览的页面
this.$router.replace('/menu')//指定跳转的地址
this.$router.replace({name:'menuLink'})//指定跳转路由的名字下
this.$router.push('/menu')//通过push进行跳转
this.$router.push({name:'menuLink'})//通过push进行跳转路由的名字下
}
}
}
</script>
6.3$router.push
和$router.replace
的区别
- 使用push方法的跳转会向 history 栈添加一个新的记录,当我们点击浏览器的返回按钮时可以看到之前的页面。
- 使用replace方法不会向 history 添加新记录,而是替换掉当前的 history 记录,即当replace跳转到的网页后,‘后退’按钮不能查看之前的页面。
更多推荐
所有评论(0)