vue的路由的用法（router）

博主这几做一个vue的小项目经常用地路由，讲讲个人的浅薄的看法与使用：

vue路由做跳转：（博主是用vue-cli脚手架新建的项目，这里就不谈了）

假设是从home.vue跳到newslist.vue

 

1.首先初始的页面ihome.vue
然后做好要跳转的页面newslist。vue
再在路由的js文件下引入组件

import Home from '相对于当前路径';
import NewsList from '相对于当前路径'；

 

2.import Vue from 'vue';

引入路由对象：

import Router from 'vue-router';

安装路由插件
Vue.use(Router);

 

3.再在你的Router规则写完善
export default new Router({
routes: [
{ path: '/', redirect: { name: 'home' } }, //重定向（当地址栏为端口号/时，跳转到名字为home名路由，即初始化为home）

{
name: 'home', //用于路由跳转的名字
path: '/home', //到时候地址栏会显示的路径
component: Home //引入组件
},

{ name: 'newslist', path: '/newslist', component: NewsList }, //跳转的页面
]
})

 

 

4.因为博主的路由js与main.js不是一起的，所以需要在main.js引进全局去

import router from '路径'
router加入new Vue里去，

5.这个路由在home.vue里的写法

建议替换某个a标签，起到跳转的作用，就点击这个标签即可去跳转
<router-link :to="{name:'newslist'}">
内容
</router-link>

 

6.最后别忘了在初始的app,vue里加上

<!-- 中间内容变化，即组件引用变化 -->
<router-view></router-view>

补充，而且路由里可以传参，可以用query或者params,其用法：

即params/query:{变量名：变量}

在路由的另一端接收：

在created函数里，用变量接收：变量=this.$route.query/params.变量名；

即这个变量就可以用了

一般来说不用params传参，因为query会默认在地址栏上显示传参了什么，方便看

而params要看的话，要在Router规则的path上末尾加上：变量名

因为query会默认在地址栏末尾加上？变量名

 

 

 

 

 

上面页面是5,6点是声明式的跳转路由；

可以用更加直观的编程式：

this.$router.push({name:'home',query: {id:'1'}})

接收同第6点：用变量接收：变量=this.$route.query/params.变量名；

详情可参考：https://blog.csdn.net/jiandan1127/article/details/86170336

并且值得注意的是：

query刷新不会丢失query里面的数据，url可见;

params刷新 会 丢失 params里面的数据，url不可见。