vue路由分类
1：动态路由（传参数 /goods/:id/name/:name 接受 $route.params）
2：嵌套路由
{
path: "/home", component: home,
children: [
{ path: "game", component: game }
]
}
3：编程路由（通过JavaScript实现页面跳转）
- $router.push(“name”);
- $router.push({path:”name”});
- $router.push({path:”name”?a=123}); //传参
- $router.push({path:”name”，query:{a=123}});
- $router.go();
- 参数查询：$route.query.[参数名]
相关函数
4：命名路由和命名视图
简单理解 就是给路由和视图命名（path加上name router-view 加上name）
例子：
router-》index.js
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/goods/:id',
name: 'Goods',
component: Goods
},
{
path: '/news',
name: 'news',
component: news
}
]
})
hello.vue
<router-link :to="{name:'Goods',params:{id:5}}">跳转到goods</router-link>
<router-link :to="{name:'news'}">跳转到news</router-link>
APP.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view class="top"/>
<router-view class="left" name="goods"/>
<router-view class="news" name="news"/>
</div>
</template>
