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

1.vue路由

可以实现单页面应用。

路由三要素

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

<router-link>导航

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

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

实现步骤

2.router配置

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

pathurl

name对应的参数的模块名称

ponent:组件名

用组件时一定要注册

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

3.实现传参配置

配置

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

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

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

4 子页面

配置

 {
 path: '/admin',
 name: 'Admin',
 ponent: Admin,
	children:[
		{path:"ucenter",ponent:Ucenter},
		{path:"activity",ponent: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()

到此这篇关于vue路由的配置和页面切换的文章就介绍到这了,更多相关vue路由的配置和页面切换内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO！