08-Vue.js路由功能、使用步骤

一、单页面应用SPA(single page app)

1、多页面应用：多个html文件，通过a标签对的连接联通各个页面

• 缺点：
  开发太冗余，编译、压缩耗时间
  页面间跳转速度慢，跳转空隙会出现白屏

2、单页面应用

• 优点：
  不需要刷新页面
  切换的是页面内容，用路由实现

二、路由功能

1、实现单页面的切换
2、路由携带参数、传递参数
3、路由的导航守卫
4、路由进行数据预载（即进入组件前就获得数据）

三、mode（模式）

1、种类和运行环境

• hash：使用URL hash值作为路由。支持所有浏览器。常用于浏览器端。
• history：依赖HTML5 History API和服务器配置（需要后端支持）。常用于浏览器端。
• abstract：支持所有JavaScript运行环境，如node.js服务器端。常用于服务器端。

四、router使用步骤

1、$ yarn add vue-router
2、在src目录下新建router目录，在其中创建index.js文件。这个js文件就是router的模块。
3、引入第三方依赖包、注册路由

	  import Vue from 'vue'
	  import VueRouter from 'vue-router'
	  Vue.use( VueRouter )          //第三方插件必须用Vue.use激活

4、创建一个router对象实例，并创建路由表

	 const routes = [ 
	 //每一个对象就是一个路由
	    {    
	      path: '/home',
	      component: Home
	    }
	  ]
	  const router = new VueRouter({
	    routes    //路由表中必写
	  })

5、导出router实例

	export default router

6、入口文件main.js中引入路由实例，然后在根实例中注册

	import router from './router/index.js'
	  new Vue({
	    router,
	    render: (h) => App 
	  }).$mount('#app')

7、路由展示区

	<router-view></router-view>

8、首次打开页面自动跳转首页

	 const routes = [
	      { //这条配置放在路由表的最上方
	        path: '/',
	        redirect: '/home'
	      }
	    ]

9、错误路由匹配

const routes = [
      {
        path: '/',
        redirect: '/home'   //重定向
      },
      {
        path: '/error',
        component: Error
      },
      {  //这条配置必须放在路由表最下方
        path: '**',
        redirect: '/error'
      }
    ]

10、确定mode

• 如果是hash，那么用a标签
• 如果是history，那么用<router-link></router-link>取代a标签
  • router-link组件上必须有to属性
  • router-link组件上用keep-alive属性进行浏览器缓存

11、二级路由

	  const routes = [
	      {
	        path: '/father',
	        component: Father,
	        children: [
	          {
	            path: 'son',      //不写 反斜杠/
	            component: Son，
	            name:'son'     //命名路由
  	          }
	        ]
	      }
	    ]

	//命名路由后，可在router-link组件上绑定to属性，
	<router-link :to="{name:'son'}"></router-link>