vue-router 一个十分简单的应用场景

 

时间：2018-03-28

关于vue-router：

这里只大致说一下构建过程和使用情况，将就看看！！

我使用的是vue-cli脚手架+webpack构建的项目

安装vue-cli脚手架 npm install vue-cli -g 安装到全局

安装webpack npm install webpack -g 一样安装到全局

创建一个 webpack 项目 vue init webpack projectName(项目名字) 该项目名字会自动生成文件夹，就是文件夹的名字

创建好之后的文件目录

在这个目录中：components目录存放模板文件，路由配置在router文件夹里面的index.js中，在app.vue里面使用

在index.js中通过 import myCom from '@/components/thisismycom' 来获取模板文件

 

export default new Router({
routes: [
{
path: '/to',
name: 'HelloWorld',
component: HelloWorld
},
{
path:'/my',
name:'mycom',
component:myCom
}
]
})

将已有的模板文件加入到路由中， 其中path设置访问路径，name设置路由名字，component设置要使用的模板，设置好之后，去app.vue文件中

<router-link to="/to">moren</router-link>
<router-link to="/my">mine</router-link>
<router-view/>

使用<router-link to="/to"></router-link> 来表明路由路径，

使用<router-view/>来显示路由路径对应的模板内容。

以上只是一个最简单的应用，后面再去看看一些复杂的场景。