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

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"]

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

5 页面切换

• 跳转：$router.go(-1)
• 后退：$router.back()
• 前进：```$router.forward()``
• 新加历史记录切换页面：$router.push()
• 替换当前页面（不留历史记录）：$router.replace()