admin管理员组文章数量:1633784
本文略长,包含如下内容,具体可通过目录进行查看
目录
1.安装vue-router
2.路由配置
异步组件
3.搜索模式
4.路由使用
导航
5.路由传参
1.路由传递参数 方式1
2.路由传递参数 方式2
3.路由传递参数 方式3
4.查询参 方式4
5.props
6.路由嵌套
7.过渡属性
8.具名视图
9.路由重定向
10.编程式导航
11.路由守卫
全局路由守卫
路由级守卫
组件级路由
Vue Reonut'wer是Vue.js官方的路由管理器。它和Vue.js的核心深度继承,让构建单页面应用的应用有:
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数
- 基于Vue.js过渡系统的视图过渡效果
- 细粒度的导航控制
- 带自动激活的CSS class链接
- HTML5历史模式或hash模式
1.安装vue-router
如果没有项目需要先新建项目:vue create vue-routerdemo
若有项目,在已有项目的基础上,使用路由前先需要安装vue-router:
命令为:npm install vue-router --save
2.路由配置
在项目的src目录下创建router.js文件,或者将路由直接添加进App.vue。
本文采用配置router.js文件。
在新建router.js文件后,需要将其导入入口文件 main.js 内。
main.js文件:
import Vue from 'vue'
import App from './App.vue'
import router from './router.js';
Vue.config.productionTip = false
new Vue({
// router 路由必须加在挂载点上
router,
render: h => h(App),
}).$mount('#app')
可以看到,在导入后并在vue实例内使用。在vue实例内使用时只能使用router,否则会报错。若报错时参考这篇博客解决。
router.js文件,与main.js同级:
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';
import Carousel from '@/views/Carousel.vue';
// 插件挂载
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: () => import('./views/About.vue')
},{
path: '/carousel',
name: 'carousel',
component: Carousel
}
]
})
可以看到:在使用路由前需要导入vue-router并使用use进行挂载。
Vue.use(Router)
导入完成后,需要创建Router实例,具名或匿名导出。下方是匿名导出路由,导入其他页面组件,进行路由配置。路由内component是配置页面其他子组件的内容。
异步组件
路由懒加载
{
path: '/about',
component: () => import('@/views/About.vue')
}
上述代码起到了懒加载的作用,当不访问此组件时,不会下载这个组件。
同时,需要引入新界面或新路由时需要导入文件,需要在router.js内导入并同步添加routers内的路由信息。
3.搜索模式
哈希模式
使用@/views/About.vue 内的@是哈希模式,http://localhost:8080/#/about 可以动态监听路由内的组件变化。
history模式(更好)
在router.js内Router实例内添加:
mode: 'history',
使用的是HTML5的history API,http://localhost:8080/about搜索引擎友好,可读性强,便于维护,页面不会刷新。
有一个问题就是部署时,需要将根页面的全部后缀路由指向根路由,否则会出问题。
配置路由的部分部分完成。
4.路由使用
使用路由的文件为App.vue文件,其添加导航的位置在<div id="app"></div>下,可使用router-link实现路由导航。router-view 为路由的出口或插座,所有内容的载体是也是路由切换的地点和占位符。需要注意的是,使用vue-router控制路由则必须由router-view作为展示容器。
<dvi id="app"></div>
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/carousel">Carousel</router-link>
</div>
<router-view/>
</div>
引入需要路由的组件,添加路由操作完成。
在添加好进行切换后,实际上执行的是dom操作。
导航
导航的话,router-link不能放在router-view内,否则容易乱。
在router-link这里添加时,可以选用多种方式。
<!-- 路径方式 -->
<!-- 静态导航 -->
<router-link to="/">Home</router-link>
<!-- 命名路由的方法,此方法必须给路由命名 -->
<router-link :to="{ path: 'about' }">About</router-link>
或者
<router-link v-bind:to="{ path: 'about' }">About</router-link>
<router-link :to="about">About</router-link>
<!-- 命名的路由 -->
<router-link :to="{ path: 'user', params: { userId: 123 }}">User</router-link>
<!-- 带查询参数,下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
在组件内添加 tag 标签,可以指定导航展示的标签:
<router-link :to="apple" tag="li"></rpouter-link>
最终这个导航菜单展示的为li标签。
5.路由传参
1.路由传递参数 方式1
路由可以携带一些参数,使用this.$route获取
{
path: '/home/:msg',
component: Home
}
这里的msg为传递的参数。
在导航上需要添加需要传递传递的参数,这里是将vuejs字符串作为参数传递出去:
<router-link to="/home/vuejs">home</router-link>
获取参数
这个传递的参数,是传递给了home,在Home.vue组件内获取,也就是你传递的这个组件内的获取,通过下方代码获取:
<p>{{ $route.params.msg }}</p>
也可以通过在生命周期函数内获取等等或其他位置,主要是通过下方代码获取(需要添加this):
this.$route.params.msg
展示分别为页面和在函数内打印获取的参数:
2.路由传递参数 方式2
直接通过添加,跳转到home页,传递的参数为vuejs111(以示区分):
this.$router.push('/home/vuejs111')
测试结果如下:
方式2传递的参数可以更多而且更方便。如果参数过多,方式1的修改比较麻烦,不灵活。
3.路由传递参数 方式3
如果参数很多时,我们可以通过给 this.$router.push 再添加一个参数params(对象):
this.$router.push({name: 'home',params:{id:1, msg: 'vuejs111'}})
使用path会影响路径,所哟我们需要使用路由名称name。
同时需要在router.js的文件上添加name:
{
path: '/home/:msg',
name: 'home',
component: Home
}
这样算配置完成,最后的结果为(获取的方式不变,在上面):
4.查询参 方式4
传递查询参:
<router-link to="/home/vuejs?foo=bar">home</router-link>
获取查询参的方式(query.foo):
this.$route.query.foo
路由可读性强,而且是必传参时,使用参数传递,而非查询参。
5.props
props传静态值
先在router.js上加测试路由,通过'/static'访问page1:
{
// 给组件传静态值
path: '/static',
component: Page1,
props: {
foo: 'bar'
}
},
然后在Page1.vue上添加:
props:{
foo: {
type: String,
default: ''
}
},
之前在Page1.vue上获取:
<h3>foo:{{ foo }}</h3>
访问http://localhost:8080/static可以看到最后的结果为: foo: bar。
props传动态值
{
// 将route.params内的参数作为属性传进去
path: '/page1/:foo',
component: Page1,
props: true
},
<router-link to="/page1/bar">page1</router-link>
与上述效果相同
props传递函数
在router.js内修改路由函数:
{
path: '/home/:id/:msg',
name: 'home',
component: Home,
props: func
}
在router.js内添加函数:
function func({params, query}){
return {
id: params.id,
msg: params.msg,
foo: query.foo
}
}
导航App.vue:
<router-link to="/home/1/vuejs?foo=bar">home</router-link>
然后是Home.vue的代码:
<template>
<div>
<h3>home</h3>
<!-- 获取路由路径的参数 -->
<p>id:{{ $route.params.id }}</p>
<p>msg:{{ $route.params.msg }}</p>
<p>foo:{{ $route.query.foo }}</p>
<!-- 通过属性获取 -->
<p>id:{{ id }}</p>
<p>msg:{{ msg }}</p>
<p>foo:{{ foo }}</p>
</div>
</template>
<script>
export default {
props: ['id','msg','foo'],
created(){
console.log(this.$route.params.msg);
// 查询参
console.log(this.$route.query.foo);
}
}
</script>
<style lang="sass" scoped>
</style>
传参完成,大体整理到这么多,可能还有。。。
6.路由嵌套
路由内子路由的添加:
{
path: '/about',
name: 'about',
component: About,
// 这个添加的是子路由,可/red进行查看页面内的东西
children:[
{
path:' red',
component: RedApple
}
]
}
父组件必须有有一个路由的出口:
7.过渡属性
有过渡属性时,需要进行加载,可以添加transition标签进行切换,及keep-alive标签进行缓存,避免在每次加载的时候都需要重新加载视图。
<transition name=”fade”>
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>
8.具名视图
视图 router-view也可以添加名称,在componnets内根据不同视图展示不同的组件。
<router-view name="comA"/>
<router-view name="comB"/>
9.路由重定向
使用redirect将指定 主页的内容 “/” 重定向到“/home” ,最后我们看到是需要是'http://localhost:8080/'最后还是会导航到'http://localhost:8080/home'。
{
// 路由的重定向
path:'/',
redirect: '/home'
},
10.编程式导航
传递参数并下一个页面接收参数
通过js添加导航,与router-link实现效果一致:
这里 /apple 为需要跳转的路径,params为跳转需要传递的参数,页可以不添加
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 带查询参数,变成 /home?id=1111
this.$router.push({path:'/home',query:{id:"1111"}})
const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效 (命名的路由才能通过params获取参数)
router.push({ path: '/user', params: { userId }}) // -> /user
新页面接收路由传递过来的参数 this.$route.query.id :
<div>{{ this.$route.query.id }}</div>
通过此获取路由传递过来的参数。
11.路由守卫
分别为三种路由守卫:
router.beforeEach((to, from, next) => {})
beforeEnter(to, from, next){}
beforeRouteEnter(to, from, next){}
beforeRouteUpdate(to, from, next){}
内部的参数:
- to将要访问的路径
- from 代表从哪个路径跳转而来
- next 表示一个函数,表示放行 next() 放行 next('/login) 强制跳转
全局路由守卫
所有的界面都需要通过这个守卫:
router.js的修改部分:
export default new Router({
...
})
//需要将上部分改为下面的格式,里面内容不变
const router = new Router({
...
})
然后拿到router,在这里添加路由守卫,并导出:
//全局路由守卫
router.beforeEach((to, from, next) => {
console.log("to=",to);
if(to.path !== '/login'){ //要求登录
if(window.isLogin){
next()
}else{
next('/login?redirect='+to.path)
}
}else{
next(); //直接进
}
})
export default router;
在设置好之后,需要在Login.vue页面添加路由守卫的信息,设置一个简单的登录查看效果:
<template>
<div>
<h1>Login</h1>
<button @click="login">login</button>
</div>
</template>
<script>
export default {
methods: {
login() {
// 登录成功
window.isLogin = true;
const {redirect} = this.$route.query;
if(redirect){ // 有回跳地址就去哪
this.$router.push(redirect)
}else{ // 没有去首页
this.$router.push('/')
}
}
},
}
</script>
<style lang="sass" scoped>
</style>
路由级守卫
也称为路由级闸口,是添加在路由内实现的局部守卫。
router.js文件内:
beforeEnter(to, from, next){
if(window.isLogin){
next()
}else{
next('/login?redirect='+to.path)
}
},
添加在routers级别的,位置如下图:
在添加完成后,一定要注释掉全局路由里面的内容,然后添加 next();,才能继续进行,否则会报错。
组件级路由
beforeRouteEnter()
是添加在组件内的路由,使用如下:
beforeRouteEnter(to,from, next){
if(window.isLogin){
next()
}else{
next('/login?redirect='+to.path)
}
}
因为这个beforeRouterEnter()的的范围非常小,所以这个很少用。
beforeRouteUpdate()
当路由参数发生变化时触发:如/page1/vue 和 /page2/recact 的参数变化,它可以根据to拿到参数
beforeRouteUpdate(to, from, next){
next();
}
这些钩子函数内都必须添加next(),否则进行不下去。
watch()内通过$route(){}也可以拿到路由传递过来的参数。
版权声明:本文标题:Vue路由Vue Router创建、传递参数、路由守卫 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1729176578a1188796.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论