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传参,最好在Router规则的path上末尾加上:变量名

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

猜你喜欢

转载自www.cnblogs.com/ssszjh/p/9545741.html