[vue]router路由的使用

npm install vue-router --save-dev

//引入vue-router

import VueRouter from 'vue-router';//路由

Vue.use(VueRouter);

//导入您的路由组件

import UserCenter from '../UserCenter.vue';

import login from '../login.vue';

// 创建路由对象

var router = new VueRouter({

  routes: [ // 配置路由规则

    {path:"/UserCenter",component:UserCenter,name:"UserCenter"},

    {path:"/login",component:login,name:"login"},

  ]

})

//使用路由

<div id="app">

<router-view></router-view>  //路由 router-view 区域 ，显示切换的组件内容

<router-link to="/login">登录</router-link> //路由链接

</div>

//js代码

var vm = new Vue({

  el: '#app',

  router, // 挂载路由对象到 VM 实例上

})

//编程式导航

this.$router.push('/home/sort/UserCenter'+userid:id)

this.$router.push({path: '/home/sort/UserCenter',query:{userid: 'abc'}})

this.$router.push({name: 'UserCenter',params:{userid: 'abc'}})