https://www.jianshu.com/p/59cef687b5bf
VUE相关问题
路由的模式
hash(默认) history
可以不刷新页面,更改路由地址的方法:
默认地址:localhost:8080/#
1.location.hash = 'aaa'
hash地址:localhost:8080/#/aaa
2.history.pushState({},'','home')
history地址: localhost:8080/home
这个是栈添加(先进后出)
history.back() = history.go(-1)
浏览器后退
history.forword() = history.go(1)
浏览器前进
3.history.replaceState({},'','about')
这个相比于2更好,可以替换历史路由
redirect 重定向
const router = [ {path:'/',redirect:'home'}]
这样根路径就会访问默认home页面
hash如何改成history
new VueRouter({mode:'history'})
路由跳转以及router link标签自带属性
<router link>
路由跳转 <router-view>
组件占位
1.to属性:用于指定跳转的路径;
2.tag属性:用于改变其他标签;
3.replace属性:空属性,不会前进/返回;
4.active-class属性:更改选中默认class样式名字。可以直接在标签内改,也可以new VueRouter({linkActiveClass:'active'})
;
5.通过触发点击事件完成跳转this.$router.push('home')
,也有replace()
方法,同样不能前进/后退。
动态路由(传参)
<router link :to='/user'+userId>
在user页面可以通过
$route.params.userId
或者$route.query.id
来得到传进来的参数,也可以通过props来直接获取userId;
$router
和$route
的区别
$router
创建的new VueRouter({})
对象;而$route
是当前活跃的路由
路由懒加载
路由的嵌套
不写了