一、使用的方法和组件：
1、import routerfrom './routes' 导入路由所在包
2、import Aboutfrom '../views/About.vue' 导入vue文件
3、routes: []配置路由
4、{path:'/home',component: Home}, 配置跳转路径
5、{path:'/', redirect:'/about'} 默认跳转路径
6、<router-link to="/about" class="list-group-item">About 跳转 to里面是跳转路径在 index.js 文件里面配置
二、实例代码
项目结构图
index.js
/**
路由器模块
**/
import Vuefrom 'vue'
import VueRouterfrom 'vue-router'
import Aboutfrom '../views/About.vue'
import Homefrom '../views/Home.vue'
Vue.use(VueRouter)
export default new VueRouter({
// 配置N个路由
routes: [
{
path:'/about',
component: About
},
{
path:'/home',
component: Home
},
{
path:'/',
redirect:'/about'
}
]
})
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 Vuefrom 'vue'
import Appfrom './App.vue'
import VueResourcefrom 'vue-resource'
import {Button}from 'mint-ui'
import routerfrom './routes'
// 注册全局组件
// 使用插件(Button.name) 有其他组件
Vue.component(Button.name, Button)
Vue.config.productionTip =false
Vue.use(VueResource)// 内部会给vm对象和组件对象添加一个属性$htpp
/* eslint-disable no-new */
new Vue({// 配置对象的属性名都是一些确定的名称，不能修改
el:'#app',
components: {App},
template:'<App/>',
router
})
App.vue
<div class="row">
<div class="col-xs-offset-2 col-xs-8">
<div class="page-header"><h2>Router Test
<div class="row">
<div class="col-xs-2 col-xs-offset-2">
<div class="list-group">
<!--生成路由链接-->
<router-link to="/about" class="list-group-item">About
<router-link to="/home" class="list-group-item">Home
<div class="col-xs-6">
<div class="panel">
<div class="panel-body">
<!--显示当前组件-->
<router-view msg="abc">
export default {}
Home.vue
<h2>Home
<ul class="nav nav-tabs">
<li><router-link to="/home/news">News
<li><router-link to="/home/message">Message
export default {}
About.vue
<h2>About
<p>{{msg}}
<input type="text">
export default {
props: {
msg:String
}
}
三、demo实现效果
3.1、默认about
.
3.2、跳转到home
