路由
路由是用来跳转路径的,但是vue是单页面开发,所有路由没有跳转新页面,而是切换了不同组件进行显示
例如:
<div id="app">
<router-link to="/a">登录</router-link><!--超链接跳转-->
<router-link to="/b">注册</router-link>
<router-view></router-view><!--显示组件-->
</div>
<script>
//创建两个页面的组件
var login={template:'<div><h2>这是登录页面</h2></div>'}
var res={template:'<div><h2>这是注册页面</h2></div>'}
var routes=[//配置组件的路径
{path:'/a',component:login},
{path:'/b',component:res},
]
var router=new VueRouter({routes})//创建路由对象
new Vue({
el:"#app",
router//应用路由
})
</script>
路由的属性参数
to 定义跳转路径
replace 设置导航跳转后,不被history对象记录
tag 让路由更换html标签显示
active-class 路由被激活的样式,但是必须是class属性名
event 改变路由所触发的事件,默认是点击
append 设置路由查找子文件夹路径 /a/b
例如:
<router-link to="/a" replace tag="li" active-class="box" event="mouseover">登录</router-link>
简答:路由有几种定义模式?
hash模式:路径后面会带#,使用url的hash值来作为路由,支持所有浏览器,缺点是只能改变#后面的名称来实现路由跳转。
history模式:可以像正常定义路径一样,会存储历史记录,缺点是刷新页面时,如果请求了后台服务器,每次刷新都会重新请求一次,就会耗时。
abstract模式:适用于所有js环境,也可以在node.js里使用,如果没有浏览器API,路由将自动被降职进入此模式。
引用createWebHistory对象是调用history模式
引用createWebHashHistory对象是调用hash模式
$route和$router的区别
$route是“路由信息对象”,包括path,params,hash,query,fullPath,matched,name等路由信息参数。而$router是“路由实例”对象包括了路由的跳转方法,钩子函数等。