一、使用的方法和組件：
1、import routerfrom './routes' 導(dǎo)入路由所在包
2、import Aboutfrom '../views/About.vue' 導(dǎo)入vue文件
3、routes: []配置路由
4、{path:'/home',component: Home}, 配置跳轉(zhuǎn)路徑
5、{path:'/', redirect:'/about'} 默認(rèn)跳轉(zhuǎn)路徑
6、<router-link to="/about" class="list-group-item">About 跳轉(zhuǎn) to里面是跳轉(zhuǎn)路徑在? index.js 文件里面配置
二、實(shí)例代碼
項(xiàng)目結(jié)構(gòu)圖
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個(gè)路由
? 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)// 內(nèi)部會給vm對象和組件對象添加一個(gè)屬性$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">
? ? ? ? ? ? <!--顯示當(dāng)前組件-->
? ? ? ? ? ?
? ? ? ? ? ? ? <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實(shí)現(xiàn)效果
3.1、默認(rèn)about
.
3.2、跳轉(zhuǎn)到home
