vue路由的配置和页面切换 vue路由的配置和页面切换详解

时间:2021-03-16 圣京都人气:4

想了解vue路由的配置和页面切换详解的相关内容吗，圣京都在本文为您仔细讲解vue路由的配置和页面切换的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：vue页面切换,vue路由配置,vue切换，下面大家一起来学习吧。

1.vue路由

可以实现单页面应用。

路由三要素：

vue路由通过hash的变化切换页面(组件/div)

<router-link>导航

<router-view>存储页面(组件）的容器

src/router/index.js路由的配置

实现步骤：

2.router配置

对router文件夹下的index.js进行配置

path：url

name：对应的参数的模块名称

component:组件名

用组件时一定要注册

 {
 path: '/product',
 name: 'Product',
 component: Product
 }

3.实现传参配置

配置

 {
 path: '/product/:id',
 name: 'Product',
 component: Product
 }

切换: <router-link to="/product/666">产品666</router-link>

接收: {{$route.params.id}}

4 子页面

配置

 {
 path: '/admin',
 name: 'Admin',
 component: Admin,
	children:[
		{path:"ucenter",component:Ucenter},
		{path:"activity",component:Activity},
		{path:"",redirect:"ucenter"}//重定向
	]
 },

重定向: {path:"",redirect:"ucenter"}

创建新的别名: alias:["/home","/main"]

切换: <router-link to="/admin/ucenter"></router-link>

5 页面切换

跳转：$router.go(-1)

后退：$router.back()

前进： ```$router.forward()``

新加历史记录切换页面：$router.push()

替换当前页面（不留历史记录）：$router.replace()

总结

加载全部内容