Vue路由vue-router
概述
Vue Router 是 Vue.js 官方的路由管理器 github: https://github.com/vuejs/vue-router 中文官方网站https://router.vuejs.org/zh/ 安装vue-router
npm isntall vue-router --saveHelloWorld
- 创建组件Bar.vue
<template>
<div >
<h1>Bar</h1>
<router-link to="foo">跳转到Foo</router-link>
</div>
</template>
<script>
export default {
name: 'Bar',
}
</script>- 创建组件Foo.vue
<template>
<div>
<h1>Foo</h1>
<router-link to="bar">跳转到Bar</router-link>
</div>
</template>
<script>
export default {
name: "Foo",
}
</script>
<style scoped>
</style>- 创建文件router,在其目录下创建index.js文件
import Router from 'vue-router'
import Vue from 'vue'
Vue.use(Router)
import Bar from '../components/Bar'
import Foo from '../components/Foo'
export default new Router({
routes: [
{
path:"/",
redirect:"/foo"
},
{
path: '/foo',
component: Foo
},
{
path: '/bar',
component: Bar
}
]
});- 将App.vue修改
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<router-view></router-view>
</div>
</template>
<style>
#app {
text-align: center;
margin-top: 60px;
}
</style>- 在main.js注册路由器
import Vue from 'vue'
import App from './App.vue'
import router from './router/index'
Vue.config.productionTip = false;
new Vue({
router,
render: h => h(App),
}).$mount('#app')动态路由
创建组件User.vue
<template>
<div>
{{$route.params.id}}
</div>
</template>修改router目录的index文件
import Router from 'vue-router'
import Vue from 'vue'
Vue.use(Router)
import User from '../components/User'
export default new Router({
routes: [
{
path:'/user/:id',
component:User
}
]
});访问的http://localhost:8080/#/user/12347
图片.png
设置“路径参数”,将User.vue 修改成
<template>
<div>
{{$route.query.id}}
</div>
</template>增加路由配置
{
path:'/user',
component:User
}访问路径 http://localhost:8080/#/user?id=2
router-view
创建组件文件Profile.vue
<template>
<div>
用户画子界面
</div>
</template>
<script>
export default {
name: "Profile"
}
</script>
<style scoped>
</style>修改路由文件router/index.js
import Router from 'vue-router'
import Vue from 'vue'
Vue.use(Router)
import User from '../components/User'
import Profile from '../components/Profile'
export default new Router({
routes: [
{
path:'/user',
component:User,
children:[
{
path:"profile",
component:Profile
}
]
},
{
path:'/user/:id',
component:User
}
]
});同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。 访问http://localhost:8080/#/user/profile
图片.png
路由组件传参
方式 1: 路由路径携带参数(param/query) 配置路由
children: [
{
path: 'mdetail/:id',
component: MessageDetail
}
]路由路径
参数传递 注意需要加上冒号:
<router-link :to="'/home/message/mdetail/'+m.id">{{m.title}}</router-link>路由组件中读取请求参数,获取传递数据 注意是route 而不是router
this.$route.params.id方式2 <router-view>属性携带数据
<router-view :msg="msg"></router-view>缓存路由组件对象
- 默认情况下, 被切换的路由组件对象会死亡释放, 再次回来时是重新创建的
- 如果可以缓存路由组件对象, 可以提高用户体验
<keep-alive>
<router-view></router-view>
</keep-alive>路由导航
相关 API
- this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
- this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
- this.$router.back(): 请求(返回)上一个记录路由
- this.$router.go(-1): 请求(返回)上一个记录路由
- this.$router.go(1): 请求下一个记录路由
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019.06.24 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录