vue路由基础使用方法

vue路由配置

首先安装

npm install --save-dev vue-router


使用步骤&＃xff1a;
1、在main.js引入
2、使用VueRouter
3、引入组件
4、在main.js配置路由
5、在main.js实例化VueRouoter
6、在main.js创建和挂载

main.js完整代码

import Vue from &＃39;vue&＃39;
import App from &＃39;./App.vue&＃39;
import VueResource from &＃39;vue-resource&＃39;
Vue.use(VueResource);
import VueRouter from &＃39;vue-router&＃39; //1、引入VueRouter
Vue.use(VueRouter) //2、使用VueRouter import Home from &＃39;./components/Home.vue&＃39;//3、引入组件配置路由
import News from &＃39;./components/News.vue&＃39;
const routes &＃61; [ //4、配置路由{path:&＃39;/home&＃39;,component:Home},{path:&＃39;/news&＃39;,component:News},//默认加载的组件{path:&＃39;*&＃39;,redirect:&＃39;/home&＃39;}
]//5、实例化VueRouoter
const router &＃61; new VueRouter({routes //缩写 相当于 routes:routes
})new Vue({el: &＃39;#app&＃39;,router, //6、创建和挂载render: h &＃61;> h(App)
})

App.vue

路由传值

动态路由&＃xff1a;

1、引入对应的组件&＃xff08;如news-conteimport Content from ‘./components/Content.vue’

2、配置动态路由

routes:[{path:&＃39;/content/:id&＃39;,component:Content}
]


3、router-link设置为{{key}}--------{{item}}

4、在对应的页面使用this.$route.params获取动态路由的值&＃xff08;通常在mounted生命周期内&＃xff09;
代码如下&＃xff1a;

main.js(为了篇幅简洁&＃xff0c;此处省略了一些内容&＃xff0c;请对号入座)

const routes &＃61; [{path:&＃39;/home&＃39;,component:Home},{path:&＃39;/news&＃39;,component:Live},{path:&＃39;/content/:aid&＃39;,component:Content},//动态路由{path:&＃39;*&＃39;,redirect:&＃39;/home&＃39;}
]


src/components/Content.vue

src/components/Home.vue

运行效果&＃xff1a;

可以看到点击列表想会传送对应的列表下标

使用get传值

同样四个步骤

1、引入对应的组件&＃xff0c;如import Content from ‘./components/Content.vue’

2、main.js配置动态路由&＃xff08;此处不需要 :aid 之类&＃xff09;

routes:[{path:&＃39;/content&＃39;,component:Content}
]


3、Home.vue的route-link设置为
{{key}}--------{{item}}

4、在对应的页面&＃xff08;Content.vue&＃xff09;使用this.$route.query获取动态路由的值&＃xff08;通常在mounted生命周期内&＃xff09;。

相信你会知道怎么替换的&＃xff0c;此处就不贴代码了。

路由组件化&＃xff1a;

我们可以将组件封装到一个组件中&＃xff0c;方便管理
比如我们放在src/router/index.js

import Vue from &＃39;vue&＃39;
import Router from &＃39;vue-router&＃39;
import Home from &＃39;&＃64;/pages/home/Home&＃39;
import City from &＃39;&＃64;/pages/city/City&＃39;
import Detail from &＃39;&＃64;/pages/detail/Detail&＃39;
//这里的&＃64;类似一个别名&＃xff0c;在build/webpack.base.conf.js的resolve.alias配置
Vue.use(Router)export default new Router({routes: [{path: &＃39;/&＃39;,name: &＃39;Home&＃39;,component: Home}, {path: &＃39;/city&＃39;,name: &＃39;City&＃39;,component: City}, {path: &＃39;/detail/:id&＃39;,name: &＃39;Detail&＃39;,component: Detail}],
})


src/main.js

import Vue from &＃39;vue&＃39;
import App from &＃39;./App&＃39;
import router from &＃39;./router&＃39; //引入router/* eslint-disable no-new */
new Vue({el: &＃39;#app&＃39;,router, //创建与挂载components: { App },template: &＃39;&＃39;
})


总结

router使用的基本步骤&＃xff1a;
1、在main.js引入
2、使用VueRouter
3、引入组件
4、在main.js配置路由
5、在main.js实例化VueRouoter
6、在main.js创建和挂载

路由传值&＃xff1a;
动态路由&＃xff0c;路由里配置&＃xff0c;使用this.$route.params接收
get传值&＃xff0c;路由里不用配置&＃xff0c;router-link里拼接&＃xff0c;使用this.$route.query

路由组件化
将路由打包成一个组件&＃xff0c;然后在main.js直接引入使用。