vue-router

路由基础篇：vue-router

1. 编程式导航

this.$router.push('/home');
this.$router.push({ name: "home" });
this.$router.push({ path: "mine/mineFabu" });

// 路由导航接收路由传递的参数
this.$router.push({ name: 'Product_detail',params:{pid:pid}});

var productId = this.$route.params.pid; 

2. 路由导航守卫控制访问权限

需求：/home页面属于有权限的页面

1. 只有用户在登录的情况下才允许访问，如果是未登录状态是不允许看到home页面的
2. 如果用户没有登录，希望用户从home路径直接跳转到登录页

如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航到登录页面

在router.js中，添加路由导航守卫router.beforeEach

// 为路由对象，添加 beforeEach 函数(导航守卫) 
to表示将要访问的页面路径；
from表示从哪个路径跳转到哪个路径
next表示放行的函数

const router = new Router({})
router.beforeEach((to, from, next) => {

// 如果用户访问的登录页，直接放行允许访问登录页
if (to.path === '/login') return next()
// 如果访问的不是登录页，判断sessionStorage 中是否存在 token 值
const tokenStr = window.sessionStorage.getItem('token')
// 没有token，证明你没有登录，强制跳转到登录页

if (!tokenStr) return next('/login')
// 经过判断用户有token值，直接放行
next()
})

export default router

**通过用户访问的地址以及用户是否有token值，来决定用户具体访问的是哪个页面。**

3. router-link的使用

  <div>
	<router-link to="/resetpassword">忘记密码?</router-link>
  </div>
  

路由懒加载：

component: () => import ('@/views/own-space/own-space.vue')

4. 路由重定向 redirect

创建登录组件，通过路由的形式渲染到App根组件，添加路由重定向redirect

1. 在components/新建登录组件：login.vue
2. 在路由 router.js 导入路由–添加路由规则
3. 在根组件 App.vue，添加路由占位符

	// 导入创建的登录组件
	import Login from './components/Login.vue'   
	export default new Router({
        routes: [{
            path: '/',
            redirect: '/login'          
        }, {
            path: '/login',                      
            component: Login
        }]
    })

3.在根组件 App.vue，添加路由占位符    <router-view></router-view>
	

5.嵌套路由 children

1. 定义Welcome.vue
2. 在Home.vue的Main的位置，放置路由占位符
3. 将welcome这个路由设置为home路由的子路由规则；这样在home页面中嵌套显示了welcome的子组件

第一步：在components下，新建组件 Welcome.vue

第二步：在Home.vue的Main的位置，放置路由占位符

<router-view></router-view>

第三步：在router.js

• 导入路由

import Welcome from './components/Welcome.vue'

• 添加路由规则
  • 访问/home重定向到/welcome
  • 在home路由里面嵌套welcome路由规则，子路由规则用children：[{ }]

		{
      	path: '/home',
      	component: Home,
      	redirect: '/welcome',      
      	children: [{
          	path: '/welcome',
          	component: Welcome
      	}]
  	}