Vue-router基础

1.使用vue-router（Vue cli 创建项目）

//1.router/index.js中：引入插件，并注册到全局中，然后引入需要的组件。
import Router from 'vue-router',
Vue.use(Router)
//2.router/index.js中：配置路由，并实例化导出：
export default new Router({
    routes = [
        {path:'/home',component:Home}, //静态路由
        {path:'*',redirect:'/home'}
    ]
})
//3.main.js中：引入路由组件，并挂载到整个应用程序的入口组件App：
import router from './router'
new Vue({
    el:'#app',
    router,
    components: { App },
    template: '<App/>'
})
//4.在入口组件App，或其他子组件中：配置路由跳转(App.vue及Helloworld.vue等)
<router-link to="/home">Home</router-link>
//5.写入：路由匹配到的组件渲染在这里
<router-view><router-view/>

2.嵌套路由（适用于左右布局）：

配置时：
{
    path:'/User',
    component:User,
    chidren:[{
        path:'/User1',
        component:User1
        }]
}
再加一个<router-view>

 3.路由传参

（1）动态路由params：

1.配置动态路由：
{
    path:'/User/:uid',
    name: 'user',
    component:User
}
2.传值页面：
//传参方式二：命名路由方式
this.$router.push({
    name:'user',
    params: {
        uid: '10011'
    }
})
//传参方式二：
<router-link :to="/User/10011">
3.获取动态路由值：
this.$route.params.uid  //得到：10011

（2）get方式动态传值（query）：

1.配置路由：
{
    path:'/User',
    component:User
}
2.传值页面：
//传参方式一：JS方式
this.$router.push({
    path:"/User",
    query:{
        uid:"10011"
    }
})
//传参方式二：
<router-link :to="/'User?id='10011">
3.获取动态路由值：
this.$route.query.uid  //得到：10011