vue-router笔记

什么是前端路由？

路由是根据不同的url地址展示不同的内容或页面

前端路由大致可分为4类

1. 动态路由匹配
2. 嵌套路由
3. 编程式路由
4. 命名路由和命名视图

1. 动态路由匹配

   如： /goods/:goodsId 动态路由，必须要输入goods开始，后面加一个动态的数字或字符串

   // router/index.js文件
   export default new Router({
     mode: 'history', /* 指定路由模式， history模式在url中是没有#号的，只有hash模式才有 */
     routes: [
       {
         path: '/goods/:goodsId',   /* 动态路由模式 */
         name: 'Goods',
         component: Goods
       }
     ]
   })
   
   // 访问时可以输入  localhost:8080/goods/156
   

   ​

2. 嵌套路由

   嵌套路由就是在一个页面中有多个路由链接，可以切换到不同的页面或内容而无需刷新(路由嵌路由).

   下面的案例中在商品列表中嵌套了两个子路由

   1. 通过 http://localhost:8080/goods/image访问图片
   2. 通过 http://localhost:8080/goods/title访问标题

   
   import Vue from 'vue'
   import Router from 'vue-router'
   import Goods from '@/views/GoodsList'
   import Img from '@/views/Image'
   import Tit from '@/views/Title'
   
   // 如果在一个模块化工程中使用vue-router，必须要通过 Vue.use() 明确地安装路由功能
   Vue.use(Router)
   
   export default new Router({
     mode: 'hash',  /*有#号， 默认就是这种方式*/
     routes: [
       {
         path: '/goods',
         name: 'Goods',
         component: Goods,
         
         /**
         *  1.使用children属性指定子路由
         *  2.在children里面的path中不能出现绝对路径符合/
         *  3.{ path: '/title', component: Tit }中 path 的值多了斜杠，是错误的写法
         */
         children: [
           { path: 'image', name: Img, component: Img },
           { path: 'title', component: Tit }
         ]
       }
     ]
   })
   

   ​

3. 编程式路由

   通过js来实现页面的跳转，目前有3种方法可以实现跳转

   $router.push.('name');
   $router.push.({path:'name'});
   $router.push.({path:'name?id=123'})或$router.push.({path:'name', query:{a:123}});
   

   ​

4. 命名路由和命名视图

   给路由定义不同的名字，根据名字进行匹配

   给不同的router-view定义名字，通过名字进行对应组件的渲染

   
   import Vue from 'vue'
   import Router from 'vue-router'
   import Goods from '@/views/GoodsList'
   import Img from '@/views/Image'
   import Tit from '@/views/Title'
   
   // 如果在一个模块化工程中使用vue-router，必须要通过 Vue.use() 明确地安装路由功能
   Vue.use(Router)
   
   export default new Router({
     mode: 'hash',  /*有#号， 默认就是这种方式*/
     routes: [
       {
         path: '/',
         name: 'GoodsList',
         components: {
           default: GoodsList,
           tit: Tit,
           img: Img
         }
       }
     ]
   })
   

什么是后台路由？

浏览器在地址栏中切换不同的url时，每次都向后台服务器发出请求，服务器响应请求，在后台拼接html文件传给前端显示, 返回不同的页面,意味着浏览器会刷新页面，网速慢的话说不定屏幕全白再有新内容。后端路由的另外一个极大的问题就是 前后端不分离。

路由的模式

路由的模式有两种

• mode: 'history'
• mode: 'hash' 会有一个#号出现在url中

// router/index.js文件中指定路由模式

import Vue from 'vue'
import Router from 'vue-router'
import List from '@/components/List'     /*@指的是src根目录*/

// 如果在一个模块化工程中使用vue-router，必须要通过 Vue.use() 明确地安装路由功能
Vue.use(Router)

export default new Router({
  mode: 'hash',    /* 指定路由模式 */
  routes: [
    {
      path: '/',
      name: 'lists',
      component: List
    }
  ]
})

history

js中有一个全局的对象history 记录着用户的操作历史，history.length 记录着已经操作了多少步

其实vue-router就是对history的一个封装

1. 当前页面刷新 history.go(0)
2. 前进一页 history.go(1)
3. 后退一页 history.go(-1)
4. 当前页面刷新 history.back(0)
5. 后台一页 history.back(1)
6. 改变页面 history.pushState(描述，标题，地址)

注意点1：在template中的错误

在任何的 .vue 文件，template模板中只能有一个根元素，如果出现两个或两个以上的根元素都会出现语法错误

• 错误的写法

  ​

• 正确的写法

  ​

注意点2：引入组件/注册组件/使用组件

注意点3：路由中的传参区别

要注意一个问题。router跟route有所不同。router是路由对象，所有在js中使用的路由对象

route是单个路由对象。

1. 动态路由的传参：通过 $route.params.goodrId 属性拿到值

   routes: [
       {
         path: '/goods/:goodsId',   /*动态路由可以通过$route.params.goodrId拿到goodsId的值*/
         name: 'Goods',
         component: Goods
       }
    ]
   

   ​

2. 通过问号传参:

   // 在methods里面调用某个方法，方法里面调用页面跳转
   this.$router.push({path:'/car?goodrId=123'});
   
   // 使用 $route.query.goodsId可以拿到goodsId的值
   

   ​

vue注意事项

1. Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器
2. 在引入vue时必须要在head标签里面引入，不能在body标签结束前引入，这样可以避免出现抖屏的现象。
3. 使用 npm run build 命令可以生成成产环境的代码，即浏览器支持的代码，会在根目录中生成一个dist 文件夹，里面就是生成环境所使用的代码。

vue-router注意事项

在浏览器的地址栏中可以看到url有#号是怎么回事？

原因是在路由设置时有两种表示方式：第一种是history，第二种是hash。如果是使用hash表示法就会在url中显示#号。