vue-router近期学习总结

最近好累，今天晚上没有心情敲代码了，写写博客，总结一下这几天的学习

一、vue-router

1. 可以通过路由来改变当前的页面的内容，

     - 将一个页面分（除了登录页面）成多个部分（头部，左侧菜单，底部，头部）
     - 每一个部分都由路由引入，但是当我们进行左边操作的时候头部、左侧 、和底部是不会改变的，改变的仅仅是我们的内容。
     - 使用命名路由：`<router-view> </router-view>`为主要要显示的页面，这里就是图片中的内容，
     - `<router-view name="footer"></router-view>`显示其余部分的页面，
     - 这里在路由中就要将一起显示的组件注册到要显示的页面的路径中
   

{
		// path 为路径 ：'/'为默认路径
        path: '/',
        // 组件注册 组件通过import引入后使用
        components: {
        	// 默认路由即为'内容'
            default: Index,
            // 底部
            footer: Footer,
            // 头部
            Header: Header,
            // 左边
            Left: Left
        }
    }

2. 路由可嵌套

	 - 在一个组件中同样可以再次写入<router-view> </router-view>
	 - 此时要在router文件中给这个组件加个children

	{
        path: '/news',
        components: {
            default: news,
            tip: NewsTip,
            Header: Header,
            Left: Left
        },
        children: [{
            path: 'newsDetial',
            component: newsDetial
        }]
 	}

		 - 这个时候通过<router-link :to=""></router-link>跳转到对应的页面
		 - 

2. 路由守卫

   - 路由守卫全局为 router.beforeEach 组件中为  router.beforeEntry 
   - 用法类似  router.beforeEntry((to, from, next) => {}) 要注意to from next 的位置。
   - 一般路由元信息与路由守卫一起决定是否阻止跳转到某个页面。
   - 路由元信息：在路由之后再配置meta 自定义状态，随后在to.meta.‘自定义名称中’。