Vue2.0构建——Vue-router

SweetTabitha 发布于7月前 阅读38次
0 条评论

vue-router初步学习

1、介绍:

Vue-router是Vue.js官方的路由插件,适用于构建单页应用。vue的单页应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。

2、以vue-cli搭建的项目为对象进行讲解
(1)、首先在router/index.js文件中配置路由:

import Vue from 'vue'
import Router from 'vue-router'
import homelist from '../homelist'
import rolelist from '../rolelist'

Vue.use(Router)

const routes = [
    //path是对应路由,component是该路由映射的组件,name是命名路由,使得在链接一个路由的时候更加方便。
  { path: '/home',component: homelist,name:'homelist'},
  { path: '/role',component: rolelist,name:'rolelist'}
];

export default new Router({
  routes
})

要链接到一个命名路由,可以给 router-link 的 to 属性传一个对象:
<router-link :to="{ name: 'homelist'}">Home</router-link>

查看原文: Vue2.0构建——Vue-router

  • ticklishmouse
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。