首先,由于博主学到vue的路由时是基于vue-cli3.0和webpack打包器进行开发的,所以,菜鸟教程和一些官方教程的案例好像并不适合(可能是自己刚学皮毛理解不够深),所以,博主进行了各种查阅,总算写出一个小案例,总结出如下知识点:
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式,在 IE9 中自动降级
- 自定义的滚动条行为
对于以上的几点,博主目前只掌握了路由的配置,不过仅通过这个,也认为用 通过Vue.js + Vue Router 创建单页应用,是非常方便的。
话不多说,先上一个如何通过vue-cli
和webpack
配置路由的案例。
传统的配置方法
当用vue-cli3.0和webpack生成一个项目时,会有一个router.js文件,咋们的全局路由就在这里配置
router.js(可以在这里配置hash模式(默认)或者history模式 通过mode:'history'
命令)
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import first from './views/first.vue'
import second from './views/second.vue'
import About from './views/About.vue'
import test from './views/test.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
},
{
path: '/test',
name: 'test',
component:test,
children:[
{
path :'/',
name :'first',
component:first
},
{
path: '/second',
name: 'second',
component: second
}
]
}
]
})
Vue-Router + Webpack 路由懒加载方法
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
//路由懒加载
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
// component: About
},
{
path: '/test',
name: 'test',
component:() => import('./views/test.vue'),
// component:test,
children:[
{
path :'/',
name :'first',
component:() => import('./views/first.vue')
// component:first
},
{
path: '/second',
name: 'second',
component: ()=> import('./views/second.vue')
// component: second
}
]
}
]
})
关于路由懒加载可以点击下方链接了解详情
https://blog.csdn.net/sinat_17775997/article/details/81475522
其中test组件下面的children路由是为了实现在test.vue组件中做到组件内更换的效果,即在test的路由中添加了两个子路由,为了方便,就没有把它单独提出来讲了,这里first的路由是”/”,代表的是打开时默认会加载first这个组件,上面的Home路由配置也是同样的原因。
**除此之外,我们需要建立路由对应的Page页面的vue文件,否则cmd会报错。**博主这里把它们和其他组件一起放在views目录下了,这个位置可以随便放,只要能找的到。
ex:
first.vue
<template>
<div><h1>this is test's first page</h1></div>
</template>
<script>
export default {
data () {
return {
};
},
}
</script>
<style lang='scss' scoped>
</style>
在这些都配置完成之后,我们就可以在App.vue(可以看做是项目的入口文件,在main.js中定义啦**)和test.vue中配置相应的导航啦.
App.vue
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/test">test</router-link>
</div>
<router-view/>
</div>
</template>
<style lang="less">
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
test.vue
<template>
<div>this is a test vue page
<div>
<router-link to="/test">first page</router-link> |
<router-link to="/second">second page</router-link>
<!-- 必须添加 -->
<router-view/>
<a href="http://localhost:8080/#/second">SecondPage</a>
</div>
</div>
</template>
<script>
export default {
data () {
return {
};
},
}
</script>
<style lang='scss' scoped>
</style>
简单的路由配置就已经完成,之后在当前目录下通过npm run serve
就可以查看效果啦:
从上面可以看见,点击路由的时候只是内容变了,导航并没有改变,一个简单的多视图的单页Web应用就建好啦,是不是很方便很好用呢?
最后博主再把博主的目录结构发出来
接下来博主再补充几点基础知识:
router-link
<router-link>
组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to属性指定目标地址,默认渲染成带有正确链接的<a>
标签,可以通过配置 tag 属性生成别的标签.。另外,当目标路由成功激活时,链接元素自动设置一个表示激活的 CSS 类名(active-class)。
简单来说,<router-link to='/home'>
文字</router-link>
该标签代表点击’文字‘显示指定路径的组件
<router-link>
比起写死的 <a href="...">
会好一些,理由如下:
无论是 HTML5 history 模式还是 hash 模式,它的表现行为一致,所以,当你要切换路由模式,或者在 IE9 降级使用 hash 模式,无须作任何变动。
在 HTML5 history 模式下,router-link 会守卫点击事件,让浏览器不再重新加载页面。
当你在 HTML5 history 模式下使用 base 选项之后,所有的 to 属性都不需要写 (基路径) 了。
router-view
<router-view>
组件是一个 functional 组件,渲染路径匹配到的视图组件,是显示路由的一个入口,即上面router-link指向的组件在此处显示
主要是构建 SPA (单页应用) 时,方便渲染你指定路由对应的组件。你可以 router-view 当做是一个容器,它渲染的组件是你使用 vue-router 指定的。
从解释上可以看出,这个组件在使用路由时是必须写的,因为它是渲染组件的,之前博主就因为没写这个而找了很久的bug(表示心力憔悴的同时对自己很无语)
关于vue-router的更多知识,查阅官方文档,博主所写全是皮毛。
博文持续更新,若有问题可联系博主,感谢
博文参考
https://blog.csdn.net/Joshua_HIT/article/details/59635160