两种引入路由组件的方式和区别
第一种
import Home from './../views/Home.vue'
{
path: '/',
component: Home
},
第二种
{
path: '/about',
component: () => import('./../views/About.vue')
}
区别:
第二种方式起到了懒加载的作用,
重定向
把当前访问的路径,重定向到另一个位置
{
path: '/main',
<!-- 方式一:命名路由的方式 -->
redirect: {
name: 'home'
}
<!-- 方式二: -->
redirect: to => {
return {
name: 'home'
}
}
<!-- 方式三: -->
redirect: to => {
return '/'
}
<!-- 方式四: -->
redirect: to=>'/'
<!-- 方法五: -->
redirect: "/"
},
命名路由与别名
{
path: '/',
name: "home", // 命名路由
alias: 'home_page', // 别名,指的是home_page和home这两个名字指向的是同一个页面
component: Home,
},
动态路由
定义动态路由
{
path: '/argu/:name', // 动态路由
name: 'argu', // 命名路由
component: ()=>import('@/views/Argu.vue'),
}
获取动态路由的参数
{{ $route.params.name }}
$route:当前加载页面的路由对象
动态路由的作用
起到了页面复用的作用
嵌套路由
{
path: '/parent',
name: 'parent',
component: ()=> import('@/views/Parent.vue'),
children: [
{
<!-- 第一个子路由 -->
// 子嵌套路由会自动补全斜线,所以不需要添加斜线
path: 'child',
component: () => import("@/views/Child.vue")
},{
<!-- 第二个子路由 -->
}
]
}
http://localhost:8080/#/parent/child
命名视图
有时候想展示多个视图,而不是嵌套展示。
<!-- 默认的是default -->
<router-view />
<router-view name="email"/>
<router-view name="tel"/>
{
// 命名视图
path: '/named_view',
// 这里有s,代表多个组件
components: {
default: () => import("@/views/Child.vue"),
email: () => import("@/views/Email.vue"),
tel: ()=> import("@/views/Tel.vue")
}
}
路由如何展示到页面上
<!-- 路径方式 -->
<router-link to="/">Home</router-link>
<!-- 命名路由的方法,此方法必须给路由命名 -->
<router-link :to="{ name: 'about' }">About</router-link>
或者
<router-link v-bind:to="{ name: 'about' }">About</router-link>
<router-link :to="about">About</router-link>
<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
<!-- 带查询参数,下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
编程式的导航
js操作路由
1、返回上一页
第一种方式
this.$router.back();
第二种方式
this.$router.go(-1);
前进一页
this.$router.go(1)
2、跳转到某个页面
方法一:路径方法
this.$router.push("/parent")
方法二:命名路由的方法
this.$router.push({
name: 'parent'
})
// 也可以在参数中添加一些信息
this.$router.push({
// 参数(查询信息)
name: "parent",
query: {
name: 'fujingwen'
}
// 或者
// 参数
name: 'argu',
params: {
name: "fujingwen"
}
// 或者(ES6的模板语法)
path: `/argu/${name}`
})
3、替换到某个路由
this.$router.replace({
name: "parent"
})
跳转与替换的区别:
replace:
当使用push时,会在浏览历史留下记录
replace的话,浏览历史会被替换,不会留下以前的记录