路由：路：路径（地址） 由：方向
针对于单页面应用，所提供的一个解决方案。根据地址传递的参数，来决定具体要使用的组件。
1、下载(如果已下载该步可以省略)
cnpm install vue-router -S
2、引入
import Router from 'vue-router'
3、安装：
Vue.use(Router)
4、生成router对象
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
}
]
})
**************************************************************
引入组件有两种方法
1、import One from '@/views/One'
{
path:"/one",
component:One
}
2、
{
path:"/two",
component:()=>import('@/views/Two')
}
**************************************************
路由如何引入子组件
1、在components下新建一个文件Child.vue
2、在路由组件当中使用时
1、
import Child from "@/views/Child"
export default {
components:{
Child
}
}
2、
export default {
name: "one",
components:{
Child:()=>import('@/components/Child')
}
}
************************************************
router-view:是一个内置的组件。将符合要求的路由所指向的组件进行渲染的地方。
router-link:是一个内置组件。可以实现组件的切换。
属性：
1、to：跳转到什么路由
* 地址是不区分大小写的。对大小写不敏感
* 如果地址相同，以第一次优先。
*****************************************
404:
{
path:"*",
component:()=>import("@/views/Error")
}
****************************************
别名：可以通过“/"或“/home"来进行访问
{
path: '/',
name: 'home',
alias:"/home",
component: Home
},
* ：提供了另外一种访问该路由的方式。
*****************************************
重定向：
{
path:"/lalala",
redirect:"/two"
},
*当你的地址为lalala时，重定向到path为“/two" 的路由
****************************************
如何实现路由的跳转
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>|
<!--<router-link to="/one">One</router-link>|-->
<!--<router-link :to="one">One1</router-link>|-->
<!--<router-link :to="{path:'/one'}">One2</router-link>|-->
<router-link :to="{name:'xixi'}">One3</router-link>|
<router-link to="/two">two</router-link>|
*******************************************************************
单页面多路由
{
path:"/three",
// component:()=>import("@/views/Three")
components:{
one:()=>import("@/views/One"),
two:()=>import("@/views/Two"),
three:()=>import("@/views/Three"),
default:()=>import("@/views/MyTwo")
}
}
template:
one:<router-view name="one"/>
<hr/>
two:<router-view name="two"/>
<hr/>
three:<router-view name="three"/>
<hr>
<router-view></router-view>
<hr>
<router-view></router-view>
*******************************************************************
* this.$route来得到当前路由的配置信息。
路由传值:
1、query
1、如何传递
<router-link to="/query?a=1&b=4">query</router-link>|-->
<router-link :to="{name:'query',query:{a:3,b:7}}">query</router-link>|
<router-link :to="{path:'/query',query:{a:1,b:3}}">query</router-link>|
2、如何接收
this.$route.query;// {a:xx,b:xxx}
优点：刷新数据不会丢失.还可以传递对象
2、params
1、如何传 *：params不可以与你的path结合使用。
<router-link :to="{name:'params',params:{a:1,b:3}}">params</router-link>
2、接收：
this.$route.params.// {a:1,b:3}
缺点：刷新数据不存在。
3、设置路由
1、配置路由
{
name:"setRouter",
path:"/setRouter/:a/:b",
component:()=>import("@/views/SetRouter")
}
2、传
<router-link :to="{path:'/setRouter/1/2'}">setRouter</router-link>|
<router-link :to="{path:'/setRouter/1/2'}">setRouter</router-link>|
3、接收
this.$route.params
********************************************************************
路由编程式导航:通过你的JS语句来控制你路由的跳转。
this.$router.push("/");
this.$router.push({name:"query",query:{a:5,b:8}});
this.$router.push({name:"params",params:{a:5,b:8}});
this.$router.go(-1):后退
this.$router.go(1):前进
