router配置
注册完的路由，不管是路由组件还是非路由组件都存在$route,$router属性
- $route：一般获取路由信息（路径，query，params等）
- $router：进行编程式导航，进行路由跳转（push，replace）
路由可以设置mate属性，也就是每个路由身上携带的信息。自定义编写
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
children: [
{
path: 'bar',
component: Bar,
// a meta field
meta: { requiresAuth: true }
}
]
}
]
})
路由跳转传参
明式导航router-link：
- 不带参数跳转
链接如果是'/'开始就是从跟路由开始，如果开始不带'/',则从当前路由开始
<router-link to="about">关于</router-link>
<router-link :to="{ name: 'about' }">关于</router-link>
<router-link :to="{ path: 'about' }">关于</router-link>
- 带参数params跳转
- 带参跳转时需要使用name关键字，使用path时能跳转，但是不能传递参数
- 需要在路由里边配置path: '/about/:id’，并且传参会显示在链接中http://localhost:8080/about/1
- 取值时使用 this.$route.params.id
<router-link :to="{ name: 'about', params: { id: 1 } }">关于</router-link>
- 带参数query跳转
- 路由里边不需要设置 :id 参数，直接path: '/about’即可
- 参数会拼接到 http://localhost:8080/about?id=1，类似get
- 取值时使用 this.$route.query.id
<router-link :to="{ name: 'about', query: { id: 1 } }">关于n</router-link>
<router-link :to="{ path: 'about', query: { id: 1 } }">关于p</router-link>
编程式导航push，replace：
声明式导航能做的都可以做，还可以做其他的业务逻辑
- 不带参数跳转，name，path都可以使用
// this.$router.push("about");
// this.$router.push({ name: "about" });
// this.$router.push({ path: "about" });
- 带参数query，name和path都可以用，参数拼接到url中
//使用name关键字
this.$router.push({ name: "about", query: { id: 1, ids: 2 } });
// http://localhost:8080/about?id=1&ids=2
// 使用path关键字
this.$router.push({ path: "about", query: { id: 1, ids: 2 } });
// http://localhost:8080/about?id=1&ids=2
// 直接使用url拼接
this.$router.push("/about?id=1");
// http://localhost:8080/about?id=1
// 接收参数
this.$route.query
-
带参数 params，不会显示到url中
路由需要配置path: '/about/:id/:ids’参数，否则刷新后参数消失
params只能和name一起使用，否则参数传不进去
this.$router.push({ name: "about", params: { id: 1, ids: 2 } });
// 接收参数
this.$route.params
push, relpace, go区别
- push：跳转到指定url，并且向history栈中添加一个记录，点击后退会返回上一个页面
- replace：跳转到指定url，但是history中不会有记录，点击返回跳转到上上个页面（栈中有记录的页面，可以说是直接替换了当前页面）
- go：向前或者向后跳转n个页面，可以为正数或者负数，为0时刷新当前页。
