vue 路由的配置与页面切换

时间:2020-9-9 作者:admin


vue 路由的配置与页面切换

1.vue路由

  • 可以实现单页面应用。

  • 路由三要素:
    vue路由通过hash的变化切换页面(组件/div)
    <router-link>导航
    <router-view>存储页面(组件)的容器
    src/router/index.js路由的配置

  • 实现步骤:
    vue 路由的配置与页面切换

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 子页面

  1. 配置
 {
    path: '/admin',
    name: 'Admin',
    component: Admin,
	children:[
		{path:"ucenter",component:Ucenter},
		{path:"activity",component:Activity},
		{path:"",redirect:"ucenter"}//重定向
	]
  },
  • 重定向:{path:"",redirect:"ucenter"}
  • 创建新的别名:alias:["/home","/main"]
  1. 切换:<router-link to="/admin/ucenter"></router-link>

5 页面切换

  • 跳转:$router.go(-1)
  • 后退:$router.back()
  • 前进:“`$router.forward()“
  • 新加历史记录切换页面:$router.push()
  • 替换当前页面(不留历史记录):$router.replace()
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。