Vue-Router基础学习笔记(小结)

时间:2021-05-26

vue-router是一个插件包,要先用npm进行安装

1、安装vue-router

npm install vue-routeryarn add vue-router

2、引入注册vue-router

import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)

3、链接跳转

<router-link to='/home'></router-link> //你可以在template中使用它实现一个可点击跳转到home.vue的 a 标签this.$router.push('/about'); //在methods方法中跳转到about页面this.$router.go('-1'); //在js中返回上一个页面

4、经常用到

this.$route.params.name //在js中获取路由的参数.router-link-active //当前选中路由的匹配样式$route.query //获取查询参数$route.hash //哈希

5、路由配置

export default new Router({ routes:[ { //第一层是顶层路由,顶层路由中的router-view中显示被router-link选中的子路由 path:'/', name:'Home', component:'Home' },{ path:'/user/:id', //ponents: { default: User, sidebar: Sidebar }, props: { default: true, sidebar: false } } ]

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章