VUE（四）路由Router

Vue Router

Vue Router是Vue.js的官方插件，用来快速实现单页应用

单页应用

SPA（Single Page Application）单页面应用程序，简称单页应用。网站的“所有”功能都在单个页面中进行呈现，一般是表现效果相似，页面并没有进行切换

优点：

• 前后端分离开发，提高开发效率

• 业务场景切换时，局部更新结构

• 用户体验好，更好接近本地应用

缺点：

• 不利于SEO
• 初次首屏加载速度较慢
• 页面复杂度较高

前端路由

URL与内容间的映射关系

Hash方式

通过hashchange事件监听hash变化，并进行网页内容的更新，可以进行函数的封装以方便复用

特点：

• Hash方法的兼容性好
• 地址中具有#，不太美观
• 前进后退功能比较繁琐

 // 准备对象，用于封装hash功能
 var router = {
    // 路由的存储位置，保存url和内容函数的对应关系
    routes: {},
    // 定义路由规则
    route: function (path, callback)
    {   this.routes[path] = callback;  },
    // 初始化路由的方法
    init: function () {
        var that = this;
        window.onhashchange = function () {
        // 进行hash的操作
        var hash = location.hash.replace('#', '');
        // 如果存在执行函数，不存在则返回，使用&&短路方法
        that.routes[hash] && that.routes[hash]();
                }
            }
        }

History方式

采用H5提供的新功能实现前端路由，使用history.pushState(null，null，path）进行变更执行对应操作，第一个参数表示与当前路径相关的状态对象，保存数据，历史记录检测用状态对象判断

特点：

• 书写简便，可存储数据量更大，能够实现前进后退
• 兼容性能差，刷新需要后端的支持

  // 准备对象，用于封装history功能
 var router = {
    // 路由的存储位置，保存url和内容函数的对应关系
     routes: {},
    // 定义路由规则
     route: function (path, callback) 
     {  this.routes[path] = callback;  },
    // 用于触发指定的路由操作
     go(path){
     // 更改url  history.pushState(null,null,path);
     // 触发路由对应的回调函数
      this.routes[path]&&this.routes[path]();
            }
 }
 links.forEach(function(ele){
            ele.addEventListener('click',function(event){
                router.go(this.getAttribute('href'));
                // 阻止元素发生默认跳转行为
                event.preventDefault();
            })
        })

• 前进后退功能，首先需要在更改url时保存路由标记

• 通过popstate事件监听前进后退按钮操作，并检测state

  history.pushState({path:path},null,path);
  init(){
  var that=this;
  window.addEventListener('popstate',function(e)
   { var path=e.state?e.state.path:'/';
     that.routes[path]&&that.routes[path]();})
  }
  

Vue Router

简介

Vue.js官方的路由管理器，让构建单页面应用变得易如反掌

基本使用

引用路由的文件

<script src="lib/vue.js"></script>
<script src="lib/vue-router.js">

使用组件router-link来更改链接，router-view更改可视化文本

 <!-- 设置用于路由操作的组件 -->
<router-link to="/">首页</router-link>
<router-link to="/user">用户</router-link>
<router-link to="/category">分类</router-link>
<router-view></router-view>

定义路由的规则

 var routes = 
 [{ path: '/', component: Index },
  { path: '/user',component: User },
  { path: '/category',component: Category}, ];

创建路由的实例并添加到vue实例中

var router=new VueRouter({routes }); // 创建Vue实例
var vm=new Vue
({  el:'#app',  router })

命名视图

如果导航后，希望同时在同级展示多个视图（组件），就需要进行命名视图,至多有一个默认的

<router-view name="sidebar"></router-view>
//路由中通过components属性进行设置不同视图
{  path: '/category',
   components: {sidebar:Category,
                default:User}
},

动态路由

需要将某一类URL都映射到同一组件，需要使用动态路由

定义动态路由时，将路径中某个部分使用‘：’标记，就可以设置动态路由

// 设置路由规则
var routes=
[{ path:'/user/:id',component:User }];

侦听路由参数

要响应路由的参数变化，可以通过watch监听$route（由于组件没有重新创建，所以生命周期钩子created只能执行一次）

watch:{
  $route(route) 
  { console.log(route.params.id) }
      }

路由传参

通过路由的props设置数据，并通过组件props接收

var Category={
props:['id'],
template:`<div>这是类{{id}}功能</div>`}
// 设置路由规则
var routes=
[{    path:'/Category/:id',
      component:Category,
      props:true }]

当包含多个命名视图时，需要将路由的props设置为对象

props:{default:true,sidebar:false}

如果我们希望传入的是静态数据，就是将booleam值修改为对象的格式

props:{sidebar:{a:'状态1',b:'状态2'}}

嵌套路由

实际应用中，路由通常由多层嵌套组件组合而成，就需要使用嵌套路由配置

var routes=
[{  path:'/user',
    component:User,
    children:[
    {  path:'hobby',
       component:UserHobby},
    {  path:'info',
       component:UserInfo,
       children:
    [{path:'name',component:Username}]
                }]
 }]

编程式导航

通过vm的方法设置导航

• router.push（）用来导航到一个新的URL

• router-link 的to属性使用绑定方式时也可属性对象结构

  <router-link :to="/user/300">首页</router-link>
  vm.$router.push('/user/100');
  vm.$router.push({path:'/user/20'});
  

命名路由

通过push方法编程序导航方法，也可以传入别的未定义的参数

//vm.$router.push需要在控制台进行输出
vm.$router.push({name:'school',params:{id:3}})
// 路由规则
var routes=[{
       path:'/user/:id/info/school'            name:'school',
       component:School }];

自己书写router-link :to=""属性来命名规则

<router-link :to={name:'school',params:  {id:10}}>学校10</router-link>

重定向:访问URL1的地址，跳转到URL2的位置

{path:'/category',redirect:'/'}

别名：通过简介的来访问长的URL地址

var routes=[{  path:'/user/:id/info/school/ins/:date' name:'school',
alias:'/:id/:date' }];

导航守卫：阻止一些不允许的直接访问

router.beforeEach(function(to,from,next){ next(false)//阻止所有导航的操作
   if(to.path==='/user')  
      {next('/categroy')}
   else{next()//访问其他的正常执行}
})

History模式

通过Vue Router实例的mode选项来设置，这样的URL会更加美观

var router = new VueRouter({
   mode:'history',
   routes = 
   [{  path: '/user/:id/info/school',
       component: School}]
 });

Vue CLI

简介

Vue CLI是一个基于Vue.js进行快速开发的完整系统，称为脚手架工具。

作用

统一项目架构风格

初始化配置项目依赖

提供单文件组件

安装

• npm install -g @vue/cli
• vue --version查看版本

项目搭建

创建项目

• vue create project-demo

执行项目

• cd 项目目录下
• npm run serve

第三个预设

根据自己的需要在预设中进行更改，了解每个预设的具体含义

目录与文件

单文件组件

可以将组件的功能统一保存在以.vue为扩展名的文件中

• 模板结构，通过template直接设置html结构
• CSS样式也设置在组件之内，可维护性更高
• 传统组件没有构建，less需要单独操作书写

new Vue({
  render: h => h(App),
}).$mount('#app')
//文件组件分离的方式

打包与部署

无法直接被浏览器访问，需要处理成传统的HTML、CSS文件

• npm run build进行打包操作生成dist目录
• 如果需要修改，在vue项目中修改后再重新进行打包

部署指将Vue项目dist目录部署到服务器上，以备用户查看

• 安装静态文件服务器npm install -g serve
  组件的功能统一保存在以.vue为扩展名的文件中

• 模板结构，通过template直接设置html结构

• CSS样式也设置在组件之内，可维护性更高

• 传统组件没有构建，less需要单独操作书写

new Vue({
  render: h => h(App),
}).$mount('#app')
//文件组件分离的方式

打包与部署

无法直接被浏览器访问，需要处理成传统的HTML、CSS文件

• npm run build进行打包操作生成dist目录
• 如果需要修改，在vue项目中修改后再重新进行打包

部署指将Vue项目dist目录部署到服务器上，以备用户查看

• 安装静态文件服务器npm install -g serve
• 进入到dist目录下通过serve进行命令部署