上回书说到,如何在我心爱的16寸mac pro上快速构建了一个Vuejs项目。
本篇将记录如何使用VueRouter做出不同路由的复杂单页应用。
一、准备工作
1、首先我们用idea打开工程,来看看项目的目录结构
好的,真是一目了然,不介绍基础,赶时间,官网有。
2、我们启动项目以后,看到的这个初始页面
它在这个HelloWorld.vue文件里
打开就会发现,这个vue文件没有标亮,看起来很不方便,也没有HTML标签的自动补全。
可以参考这篇博客
https://blog.csdn.net/tangcc110/article/details/79776268
加一个自动补全设置。
二、正式写路由
1、首先我们把上面的那个HelloWorld.vue直接删掉。
在components目录下,新建三个页面,分别是FirstPage.vue
、SecondPage.vue以及ThirdPage.vue
最开始写简单一点就好,三个页面就以不同的文字内容区分
(1)FirstPage.vue
<template>
<div>
{{msg}}
</div>
</template>
<style>
body {
/*background-color: darkslategray;*/
}
</style>
<script>
export default {
data() {
return {msg: '大家好!我是第一个页面'}
}
}
</script>
(2)SecondPage.vue
<template>
<div>
{{msg}}
</div>
</template>
<style>
body {
/*background-color: green;*/
}
</style>
<script>
export default {
data() {
return {msg: '大家好!我是第二个页面'}
}
}
</script>
(3)ThirdPage.vue
<template>
<div>
{{msg}}
</div>
</template>
<style>
body {
/*background-color: green;*/
}
</style>
<script>
export default {
data() {
return {msg: '大家好!我是第三个页面'}
}
}
</script>
2、上一步到这里就该报错了。
我们把router目录下的index.js的路由注释掉
3、我们到main.js里面来写一个新的路由
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
// import router from './router'
import VueRouter from 'vue-router'
import FirstPage from './components/FirstPage'
import SecondPage from './components/SecondPage'
import ThirdPage from './components/ThirdPage'
Vue.config.productionTip = false
Vue.use(VueRouter)
// 定义路由
let router = new VueRouter({
linkActiveClass: 'active',
routes: [
{
path: '/',
redirect: 'FirstPageLink'
},
{
path: '/FirstPageLink',
component: FirstPage
},
{
path: '/SecondPageLink',
component: SecondPage
},
{
path: '/ThirdPageLink',
component: ThirdPage
}
]
})
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
注意刚才新建的页面在这里要引入。
这个地方写了一些link,它定义在哪呢?
4、自问自答,在App.vue里。
App.vue是入口页面
<template>
<div id="app">
<img src="./assets/logo.png">
<ul>
<li>
<router-link to="FirstPageLink">第一个页面</router-link>
<router-link to="SecondPageLink">第二个页面</router-link>
<router-link to="ThirdPageLink">第三个页面</router-link>
</li>
</ul>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
5、最终效果
点击不同页面可切换。一个简单的路由页面就实现啦!
====================================
我是更新线🧵🧵🧵2020年2月21日
====================================
上回书说到,实现了一个简单的路由页面,说完就去睡觉啦!
这次来说,路由页面里面加入多个视图。
现在的目录结构是这样滴~
新建了一个vue文件,FirstPageBPart.vue,这个是第一个页面的第二个视图部分。原来的FirstPage.vue是第一个页面的第一个视图部分。
为了区分第一个页面的两个视图,每个vue里分别加入了一张图片。
1、首先看下两个vue文件的内容
(1)FirstPage.vue
<template>
<div>
{{msg}}
<div>
<img src="../../assets/4.png" style="width: 300px;height: 300px">
</div>
</div>
</template>
<style>
body {
/*background-color: darkslategray;*/
}
</style>
<script>
export default {
data() {
return {msg: '大家好!我是第一个页面的第一个视图'}
}
}
</script>
(2)FirstPageBPart.vue
<template>
<div>
{{msg}}
<div>
<img src="../../assets/5.png" style="width: 300px;height: 300px">
</div>
</div>
</template>
<style>
body {
/*background-color: black;*/
}
</style>
<script>
export default {
data() {
return {msg: '我是第一个页面的第二个视图'}
}
}
</script>
2、然后在App.vue入口页面中加入一行,FirstPageBPart.vue的link
<router-view name="FirstPageBPartLink">第一个页面的第二个Part</router-view>
3、在main.js中将FirstPageBPart.vue的link定义到FirstPage
注意需要用到的vue文件需要import过来
好啦,这样就完成啦!看下效果
去睡觉啦~下次再更~
本文关联博客:
https://blog.csdn.net/Yolanda_NuoNuo/article/details/104419233
另附代码github链接
本文github完整源码