vue-router入门(1)—— 基本路由,动态匹配路由,嵌套路由
本系列的第一章,按照惯例,介绍一下vue-router的设计初衷,我第一次接触到vue-router是通过vue-cli的全家桶,vue-router的设计之初是为了适应单页面应用开发,但事实上,你通过新标签页的方式去访问某个路由,和你通过当前页“跳转”到该路由,路由中所包含的信息都不会丢失,当然新标签页打开和当前页打开在某些情况下也是有区别的。(比如你打开../user/123,在通过当前页
本系列的第一章,按照惯例,介绍一下vue-router的设计初衷,我第一次接触到vue-router是通过vue-cli的全家桶,vue-router的设计之初是为了适应单页面应用开发,但事实上,你通过新标签页的方式去访问某个路由,和你通过当前页“跳转”到该路由,路由中所包含的信息都不会丢失,当然新标签页打开和当前页打开在某些情况下也是有区别的。(比如你打开../user/123,在通过当前页访问../user/234,由于vue-router做了优化,他可能不会重新加载当前页面的组件,也就是不走vue的生命周期,如果你用新标签页打开的话,由于是新页面,那么新页面就需要重新加载一遍该页面的子组件了,这个在后面会提到)
相比于vue-router,vuex反而更加依赖于单页面的特性,你可以尝试开两个页面,修改A页面的state,B页面并不会有任何响应,因为这两个页面的vuex实例并不是同一个。这里算是对上一系列内容的一个小补充。
在用vue-router之前,你可能需要用npm的方式引入相关的依赖,这里不过多阐述。还有一些必要的准备工作。为了方便理解,这里放上一张我的项目的结构图,重要部分都用红色方框圈出来了,这是我平时拿来玩的一个项目,杂七杂八的文件请忽略。
首先你的项目必须要包含一个router文件夹,这个在全家桶中也会自动包含。内容一般如下所示。
//router文件夹下 index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
//这里是路由信息,后面会讲到
]
})
然后你需要在main.js引入router文件夹下的index.js,并把他挂载到全局的Vue实例中去,这样所有的子组件便可以通过this.$router,this.$route去访问vue-router对象了。
//main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router, //挂载vue-router
components: { App },
template: '<App/>'
})
做好准备工作之后,后面的操作基本都是改写router/index.js,增删路由。
1.基本路由
现在在route/index.js配置文件中,“注册”一个最普通的路由,仅仅包括路径。
//router文件夹下 index.js
import Vue from 'vue'
import Router from 'vue-router'
// 探究一下vue-router
import vueRouterPlay1 from '@/page/vueRouterPlay/vueRouterPlay1.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/vueRouterPlay1',//浏览器访问路径
name: 'vueRouterPlay1', //路由名称
component: vueRouterPlay1 //模板,对应import引入的模板信息
}
]
})
在App.vue中,用<router-view/>标签,将子页面设置好的模板暴露给父页面。你可以这么理解"暴露"一词,就是将你写好的模板,命名为routerView,然后你可以在dom中用<router-view/>标签标记模板渲染的位置,这跟Vue中template的使用非常相似,只是这个template有配合路由使用的一些特点罢了。
//App.vue
<template>
<div id="app">
<!-- 我是头部 -->
<header>我是头部</header>
<!-- 路由出口 -->
<router-view/>
<!-- 路由以外的公共部分 -->
<footer>我是脚部</footer>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
完成后,你可以在vueRouterPlay1.vue页面中写入任意代码,看下最终效果。
<template>
<div class="body">我是页面1</div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
.body{
margin-top: 20px;
padding: 20px;
height: 400px;
background: greenyellow;
}
</style>
最终结果:
2.动态路由匹配
动态路由匹配是vue-router中常用的功能,比如我们做了一个user页面,你希望/user/id=123映射到该页面,你也希望/user/id=234也能映射到当前页面,在vue-router中通过正则匹配的方式提供了这种相似路由访问的方式,当然不需要你手动写正则(如果你希望手写,vue-router也是支持的),你只需按照vue-router的规则注册路由即可。
下面我们稍微改写一下,/router/index.js配置文件的注册信息。
//router文件夹下 index.js
import Vue from 'vue'
import Router from 'vue-router'
// 探究一下vue-router
import vueRouterPlay1 from '@/page/vueRouterPlay/vueRouterPlay1.vue'
Vue.use(Router)
export default new Router({
routes: [
{
// 动态路径参数 以冒号开头
path: '/vueRouterPlay1/:id',//这里有变化
name: 'vueRouterPlay1', //不需要变
component: vueRouterPlay1 //不需要变
}
]
})
vue-router将$route——当前页面路由信息,和$router——全局路由信息,都挂载到this实例中去,你可以在任意子组件访问这两个路由信息。
<template>
<div class="body">我是页面1
<span>{{'我的id是:'+id}}</span>
</div>
</template>
<script>
export default {
computed: {
id: function () {
return this.$route.params.id //参数都保存在params中
}
},
created () {
console.log(this.$route) // 当前子页面路由信息
console.log(this.$router) // 全局路由信息
}
}
</script>
<style lang="less" scoped>
.body{
margin-top: 20px;
padding: 20px;
height: 400px;
background: greenyellow;
}
</style>
结果如下:
你可以在一个路由中设置多段“路径参数”,对应的值都会设置到 $route.params
中。例如:
模式 | 匹配路径 | $route.params |
---|---|---|
/user/:username | /user/evan | { username: 'evan' } |
/user/:username/post/:post_id | /user/evan/post/123 | { username: 'evan', post_id: 123 } |
3.嵌套路由
在实际开发过程中,我从来,没有,用过,这个东西,但还是有必要了解一下,如果有用武之地也可以用起来。
嵌套,说白了,就是嵌套。跟for循环嵌套,if条件嵌套一样,路由组件也可以嵌套路由子组件。
你可以理解为App.vue中的<router-view/>是路由最外层的出口,子组件中也可以有自己的<router-view/>,我们稍微改写一下vueRouterPlay1.vue中的代码。
<template>
<div class="body">我是页面1
<span>{{'我的id是:'+id}}</span>
<!-- 嵌套子路由 -->
<router-view/>
</div>
</template>
<script>
export default {
computed: {
id: function () {
return this.$route.params.id
}
}
}
</script>
<style lang="less" scoped>
.body{
margin-top: 20px;
padding: 20px;
height: 400px;
background: greenyellow;
}
</style>
当然,我们也应该在/router/index.js配置文件中声明一下,这个子路由对应哪个模板。在vue-router中,你需要用children声明某个路由是否含有子路由,当然子路由也可以有自己的子路由,你可以不断的嵌套,嵌套,嵌套...说实话我觉得这东西没什么意义。(可能是我做的项目比较简单,还没找到比较好的应用)
//router文件夹下 index.js
import Vue from 'vue'
import Router from 'vue-router'
// 探究一下vue-router
import vueRouterPlay1 from '@/page/vueRouterPlay/vueRouterPlay1.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/vueRouterPlay1/:id',
name: 'vueRouterPlay1',
component: vueRouterPlay1,
children: [{
// 当 /vueRouterPlay1/:id/vueRouterPlay2 匹配成功,
// vueRouterPlay2 会被渲染在 vueRouterPlay1 的 <router-view> 中
path: 'vueRouterPlay2',
component: vueRouterPlay2
}]
},
]
})
结果如下:
更多推荐
所有评论(0)