美文网首页
vue-router笔记

vue-router笔记

作者: 李华炎 | 来源:发表于2019-12-06 00:29 被阅读0次

    什么是前端路由?

    路由是根据不同的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
      
      <!-- GoodsList.vue文件 -->
      <template>
        <div>
          <p>{{ lists }}</p>
          <p>{{ lists }}</p>
          <p>{{ lists }}</p>
          <p>id = {{ $route.params.goodsId }}</p>  <!--可以拿到动态的id-->
        </div>
      </template>
      <script>
      export default {
        data () {
          return {
            lists: '我是商品列表'
          }
        }
      }
      </script>
      <style></style>
      

    2. 嵌套路由

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

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

      1. 通过 http://localhost:8080/goods/image访问图片
      2. 通过 http://localhost:8080/goods/title访问标题
      <!-- GoodsList.vue -->
      <template>
        <div>
          <p>{{ lists }}</p>
          <!-- to到达的地址一定要写绝对地址,包括上一级goods地址 -->
          <router-link to="/goods/image">图片</router-link>
          <router-link to="/goods/title">标题</router-link>
          <div>
            <router-view></router-view>
          </div>
        </div>
      </template>
      <script>
      export default {
        data () {
          return {
            lists: '商品列表'
          }
        }
      }
      </script>
      <style></style>
      
      <!-- Image.vue -->
      <template>
        <div>
          <p>{{ img }}</p>
        </div>
      </template>
      <script>
      export default {
        data () {
          return {
            img: '我是商品图片'
          }
        }
      }
      </script>
      <style></style>
      
      <!-- Title.vue -->
      <template>
        <div>
          <p>{{ title }}</p>
        </div>
      </template>
      <script>
      export default {
        data () {
          return {
            title: '我是标题标题'
          }
        }
      }
      </script>
      <style></style>
      
      <!-- /router/index.js文件 -->
      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定义名字,通过名字进行对应组件的渲染

       <!-- App.vue -->
      <template>
        <div id="app">
          <img src="./assets/logo.png">
          <!-- 这个 router-view 是装载一级路由的 -->
          <!-- 该方式很少使用,相当于将该组件划分为三部分,其实可以在GoodsList中通过样式划分区域 -->
          <router-view></router-view>
          <router-view name="tit"></router-view>
          <router-view name="img"></router-view>
        </div>
      </template>
      
      <script>
      export default {
        name: 'App'
      }
      </script>
      
      <style>
      #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
      }
      </style>
      
      <!-- /router/index.js文件 -->
      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模板中只能有一个根元素,如果出现两个或两个以上的根元素都会出现语法错误

    • 错误的写法

      <template>
        <!-- 出现两个根元素会有语法错误 -->
        <p>使用双大括号渲染内容:{{message}} </p>
        <p>使用v-html指令渲染内容:<span v-html="message"></span></p>
      </template>
      <script>
        export default {
          data () {
            return {
              message: '<span style="color: green">我是span里面的内容</span>'
            }
          }
        }
      </script>
      <style>
      </style>
      

    • 正确的写法

      <template>
        <div id='test'>
          <p>使用双大括号渲染内容:{{message}} </p>
          <p>使用v-html指令渲染内容:<span v-html="message"></span></p>
        </div>
      </template>
      <script>
        export default {
          data () {
            return {
              message: '<span style="color: green">我是span里面的内容</span>'
            }
          }
        }
      </script>
      <style>
      </style>
      

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

    <!-- App.vue是应用程序页面入口 -->
    <template>
      <div id="app">
        <router-view/>
        <!-- 3.使用组件 --> 
        <Counter></Counter>
      </div>
    </template>
    
    <script>
    // 1.引入Counter.vue组件
    import Counter from './components/Counter.vue';
    export default {
      name: 'App',
      components: {
          // 2.注册组件
          Counter
      }
    }
    </script>
    
    <style>
      #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 20px;
      }
    </style>
    

    注意点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中显示#号。

    相关文章

      网友评论

          本文标题:vue-router笔记

          本文链接:https://www.haomeiwen.com/subject/krcsgctx.html