先看整体框架
整个结构如上图。
实现效果如下:点击哪个就会展示对应的路由
创建项目
创建项目用用默认的vue2.x创建vue项目即可,路由这一块可以自己去配置
大致理一理项目结构
1、这一部分阅读者可以略过,纯属个人感受总结
2、项目components模块存放两个组件,分别对应着About路由内容和Home路由内容。在没学路由之前,我们要使用组件,只需要在使用的地方调用组件进行引用即可。但这里我们需要实现的是一个类似于点击实现跳转的功能。所以需要用到新技术router
3、router模块中存放这index.js组件,这里记录着路由相关信息,这个是vue官方推荐的写法。咱们暂且这样按规矩写,后面再体会好吧
4、view暂且用不到,和components模块功能一样,分不同模块便于管理
5、App.vue是项目最关键的组件,写过vue的都懂,用于管理其他的vue组件
6、main.js略
学习代码写法
注意:这里我们写代码,我会一次性贴出来,方便读者能跑起来整个项目,但是因为代码前后又相互调用的内容,所以有些内容共会稍显突兀,我会稍作说明。当读者看完并运行起来整个项目后再重新回头阅读和体会即可。
按照目录
1、About.vue
components里面的两个组件不需要解释
<template>
<div>
<h2>我是About路由展示</h2>
</div>
</template>
<script>
export default {
}
</script>
2、Home.vue
<template>
<div>
<h2>我是Home路由展示</h2>
</div>
</template>
<script>
export default {
}
</script>
3、router/index.js
import VueRouter from "vue-router";
import About from '../components/About'
import Home from '../components/Home'
//创建一个路由并暴露出去,后面需要用到的地方通过import VueRouter from './router'进行引入即可
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home
}
]
})
说明:index.js是vue官方默认的配置文件。
我们需要导入vue-router,然后需要实例化一个VueRouter实例,将路由配置进去。配置信息放在routes数组中
一个配置信息一个路由路径,对应一个组件,这个组件在后面的使用中会放在<vue-view/>对应的位置中,
后面我们写App.vue时会看到。
4、App.vue
看代码
<template>
<div>
<div>
<!-- to给定一个路由路径 -->
<router-link to="/about">About</router-link><br>
<router-link to="/home">Home</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {};
</script>
我们通过<router-link to="/about">About</router-link>来进行引入,这里的这个标签本质上是一个<a>标签,
也就是是一个超链接,但vue给她进行了重写,这里展示了它的用法,点击这个超链接时,他就会将路由导向/about
对应的组件,也就是我们点击这个链接,下面会出现 "我是About路由展示“
<router-view></router-view>类似插槽中的占位符,他也可以给一个name。类比插槽的使用即可。
5、main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router'
Vue.use(VueRouter)
Vue.config.productionTip = false
new Vue({
router,
render: ha=>ha(App)
}).$mount('#app')
这是程序入口文件。 需要引入vue、vue-router并在实例中配置router
品味框架结构
我所说的仅仅从这个案例出发,后面还会出路由的进阶教程。
从这个案例我们需要学会vue-router的基本使用,我们要用vue-router就需要在三个地方引入vue-router,首先在配置路由中,我们需要实例化一个VueRouter,其次在App.vue足迹暗中,我们需要放置组件,展示组件。
用到router-link,router-view。最后在main.js配置文件中,我们需要在生命周期之前创建router。
在后面我会专门出一篇文章来详细讲解vue的声明周期。
vue-router路由的基本使用差不多就这么多,后面会有高级使用教程,欢迎关注一起学习。
也可以加群交流:1142983793