vue路由配置
首先安装
npm install --save-dev vue-router
使用步骤：
1、在main.js引入
2、使用VueRouter
3、引入组件
4、在main.js配置路由
5、在main.js实例化VueRouoter
6、在main.js创建和挂载
main.js完整代码
import Vue from 'vue'
import App from './App.vue'
import VueResource from 'vue-resource'
Vue.use(VueResource);
import VueRouter from 'vue-router' //1、引入VueRouter
Vue.use(VueRouter) //2、使用VueRouter
import Home from './components/Home.vue'//3、引入组件配置路由
import News from './components/News.vue'
const routes = [ //4、配置路由
{path:'/home',component:Home},
{path:'/news',component:News},
//默认加载的组件
{path:'*',redirect:'/home'}
]
//5、实例化VueRouoter
const router = new VueRouter({
routes //缩写 相当于 routes:routes
})
new Vue({
el: '#app',
router, //6、创建和挂载
render: h => h(App)
})
App.vue
<template>
<div>
<router-link to="/home">home</router-link> <!--路由链接-->
<router-link to="/news">news</router-link> <!--路由链接-->
<router-view></router-view> <!--路由内容-->
</div>
</template>
路由传值
动态路由：
1、引入对应的组件（如news-conteimport Content from ‘./components/Content.vue’
2、配置动态路由
routes:[
{path:'/content/:id',component:Content}
]
3、router-link设置为<router-link :to="'/content/'+key">{{key}}--------{{item}}</router-link>
4、在对应的页面使用this.$route.params获取动态路由的值（通常在mounted生命周期内）
代码如下：
main.js(为了篇幅简洁，此处省略了一些内容，请对号入座)
const routes = [
{path:'/home',component:Home},
{path:'/news',component:Live},
{path:'/content/:aid',component:Content},//动态路由
{path:'*',redirect:'/home'}
]
src/components/Content.vue
<template>
<div>新闻详情</div>
</template>
<script>
export default{
mounted(){
console.log(this.$route.params);//获取传过来的数据
}
}
</script>
src/components/Home.vue
<template>
<div>
<h2>这是首页</h2>
<ul>
<li v-for="(item,key) in list1">
<router-link :to="'/content/'+key">{{key}}--------{{item}}</router-link>
</li>
</ul>
</div>
</template>
<script>
export default{
data(){
return {
msg:'ll',
list1:[123,223,233]
}
},
}
</script>
运行效果：
可以看到点击列表想会传送对应的列表下标
使用get传值
同样四个步骤
1、引入对应的组件，如import Content from ‘./components/Content.vue’
2、main.js配置动态路由（此处不需要 :aid 之类）
routes:[
{path:'/content',component:Content}
]
3、Home.vue的route-link设置为
<router-link :to="'/content?aid='+key">{{key}}--------{{item}}</router-link>
4、在对应的页面（Content.vue）使用this.$route.query获取动态路由的值（通常在mounted生命周期内）。
相信你会知道怎么替换的，此处就不贴代码了。
路由组件化：
我们可以将组件封装到一个组件中，方便管理
比如我们放在src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home'
import City from '@/pages/city/City'
import Detail from '@/pages/detail/Detail'
//这里的@类似一个别名，在build/webpack.base.conf.js的resolve.alias配置
Vue.use(Router)
export default new Router({
routes: [{
path: '/',
name: 'Home',
component: Home
}, {
path: '/city',
name: 'City',
component: City
}, {
path: '/detail/:id',
name: 'Detail',
component: Detail
}],
})
src/main.js
import Vue from 'vue'
import App from './App'
import router from './router' //引入router
/* eslint-disable no-new */
new Vue({
el: '#app',
router, //创建与挂载
components: { App },
template: '<App/>'
})
总结
router使用的基本步骤：
1、在main.js引入
2、使用VueRouter
3、引入组件
4、在main.js配置路由
5、在main.js实例化VueRouoter
6、在main.js创建和挂载
路由传值：
动态路由，路由里配置，使用this.$route.params接收
get传值，路由里不用配置，router-link里拼接，使用this.$route.query
路由组件化
将路由打包成一个组件，然后在main.js直接引入使用。