zoukankan      html  css  js  c++  java
  • vue系列5:路由

    介绍

    1. 后端路由 对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源;
    2. 前端路由 对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,hash有一个特点:HTTP请求中不会包含hash相关的内容;所以,单页面程序中的页面跳转主要用hash实现;
    3. 在单页面应用程序中,这种通过hash改变来切换页面的方式,称作前端路由(区别于后端路由);

    安装

    1、路由的基本使用

    <head>
    <style>
    <style>
        .router-link-active,
        .myactive {
          color: red;
          font-weight: 800;
          font-style: italic;
          font-size: 80px;
          text-decoration: underline;
          background-color: green;
        }
    
        .v-enter,
        .v-leave-to {
          opacity: 0;
          transform: translateX(140px);
        }
    
        .v-enter-active,
        .v-leave-active {
          transition: all 0.5s ease;
        }
      </style>
    </style>
    </head>
    <body>
      <div id="app">
    
        <!-- <a href="#/login">登录</a> -->
        <!-- <a href="#/register">注册</a> -->
    
        <!-- router-link 默认渲染为一个a 标签,如果加上tag=“span"标签,就会渲染为一个span元素;<router-view>内部永远会生成一个点击触发事件 -->
        <router-link to="/login" tag="span">登录</router-link>
        <router-link to="/register">注册</router-link>
    
    
        <!-- 这是 vue-router 提供的元素,专门用来 当作占位符的,将来,路由规则,匹配到的组件,就会展示到这个 router-view 中去 -->
        <!-- 所以: 我们可以把 router-view 认为是一个占位符 -->
        <transition mode="out-in">
          <router-view></router-view>
        </transition>
    
      </div>
    
      <script>
        // 组件的模板对象
        var login = {
          template: '<h1>登录组件</h1>'
        }
    
        var register = {
          template: '<h1>注册组件</h1>'
        }
    
    
        /*  Vue.component('login', {
           template: '<h1>登录组件</h1>'
         }) */
    
        // 2. 创建一个路由对象, 当 导入 vue-router 包之后,在 window 全局对象中,就有了一个 路由的构造函数,叫做 VueRouter
        // 在 new 路由对象的时候,可以为 构造函数,传递一个配置对象
        var routerObj = new VueRouter({
          // route // 这个配置对象中的 route 表示 【路由匹配规则】 的意思
          routes: [ // 路由匹配规则 
            // 每个路由规则,都是一个对象,这个规则对象,身上,有两个必须的属性:
            //  属性1 是 path, 表示监听 哪个路由链接地址;
            //  属性2 是 component, 表示,如果 路由是前面匹配到的 path ,则展示 component 属性对应的那个组件
            // 注意: component 的属性值,必须是一个 组件的模板对象, 不能是 组件的引用名称;
            // { path: '/', component: login },
            { path: '/', redirect: '/login' }, // 这里的 redirect 和 Node 中的 redirect 完全是两码事;Node 中的 redirect是属于服务端技术,302重定向;这里的是客户端通过某种方式修改hash值
            { path: '/login', component: login },
            { path: '/register', component: register }
          ],
          linkActiveClass: 'myactive'
        })
    
        // 创建 Vue 实例,得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {},
          methods: {},
          router: routerObj // 将路由规则对象,注册到 vm 实例上,用来监听 URL 地址的变化,然后展示对应的组件
        });
      </script>
    </body>
    

    2、路由传参------使用query方式传递参数

    <body>
      <div id="app">
    
        <!-- 如果在路由中,使用 查询字符串,给路由传递参数,则 不需要修改 路由规则的 path 属性 -->
        <router-link to="/login?id=10&name=zs">登录</router-link>
        <router-link to="/register">注册</router-link>
    
        <router-view></router-view>
      </div>
    
      <script>
        var login = {
          template: '<h1>登录 --- {{ $route.query.id }} --- {{ $route.query.name }}</h1>',
          data(){
            return {
              msg: '123'
            }
          },
          created(){ // 组件的生命周期钩子函数
            // console.log(this.$route)
            // console.log(this.$route.query.id)
          }
        }
    
        var register = {
          template: '<h1>注册</h1>'
        }
    
        var router = new VueRouter({
          routes: [
            { path: '/login', component: login },
            { path: '/register', component: register }
          ]
        })
    
        // 创建 Vue 实例,得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {},
          methods: {},
          // router: router
          router
        });
      </script>
    </body>
    

    3、路由传参------使用params方式传递路由参数

    <body>
      <div id="app">
    
        <!-- 如果在路由中,使用 查询字符串,给路由传递参数,则 不需要修改 路由规则的 path 属性 -->
        <router-link to="/login/12/ls">登录</router-link>
        <router-link to="/register">注册</router-link>
    
        <router-view></router-view>
    
      </div>
    
      <script>
    
        var login = {
          template: '<h1>登录 --- {{ $route.params.id }} --- {{ $route.params.name }}</h1>',
          data(){
            return {
              msg: '123'
            }
          },
          created(){ // 组件的生命周期钩子函数
            console.log(this.$route.params.id)
          }
        }
    
        var register = {
          template: '<h1>注册</h1>'
        }
    
        var router = new VueRouter({
          routes: [
            { path: '/login/:id/:name', component: login },
            { path: '/register', component: register }
          ]
        })
    
        // 创建 Vue 实例,得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {},
          methods: {},
          // router: router
          router
        });
      </script>
    </body>
    

    4、使用children属性实现路由的嵌套

    <body>
      <div id="app">
    
        <router-link to="/account">Account</router-link>
    
        <router-view></router-view>
    
      </div>
    
      <template id="tmpl">
        <div>
          <h1>这是 Account 组件</h1>
    
          <router-link to="/account/login">登录</router-link>
          <router-link to="/account/register">注册</router-link>
    
          <router-view></router-view>
        </div>
      </template>
    
      <script>
    
        // 组件的模板对象
        var account = {
          template: '#tmpl'
        }
    
        var login = {
          template: '<h3>登录</h3>'
        }
    
        var register = {
          template: '<h3>注册</h3>'
        }
    
        var router = new VueRouter({
          routes: [
            {
              path: '/account',
              component: account,
              // 使用 children 属性,实现子路由,同时,子路由的 path 前面,不要带 / ,否则永远以根路径开始请求,这样不方便我们用户去理解URL地址
              children: [
                { path: 'login', component: login },
                { path: 'register', component: register }
              ]
            }
            // { path: '/account/login', component: login },
            // { path: '/account/register', component: register }
          ]
        })
    
        // 创建 Vue 实例,得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {},
          methods: {},
          router
        });
      </script>
    </body>
    
    

    5、使用命名视图实现经典布局

    <style>
        html,
        body {
          margin: 0;
          padding: 0;
        }
    
        .header {
          background-color: orange;
          height: 80px;
        }
    
        h1 {
          margin: 0;
          padding: 0;
          font-size: 16px;
        }
    
        .container {
          display: flex;
          height: 600px;
        }
    
        .left {
          background-color: lightgreen;
          flex: 2;
        }
    
        .main {
          background-color: lightpink;
          flex: 8;
        }
      </style>
    </head>
    
    <body>
      <div id="app">
    
        <router-view></router-view>
        <div class="container">
          <router-view name="left"></router-view>
          <router-view name="main"></router-view>
        </div>
    
      </div>
    
      <script>
    
        var header = {
          template: '<h1 class="header">Header头部区域</h1>'
        }
    
        var leftBox = {
          template: '<h1 class="left">Left侧边栏区域</h1>'
        }
    
        var mainBox = {
          template: '<h1 class="main">mainBox主体区域</h1>'
        }
    
        // 创建路由对象
        var router = new VueRouter({
          routes: [
            /* { path: '/', component: header },
            { path: '/left', component: leftBox },
            { path: '/main', component: mainBox } */
    
    
            {
              path: '/', components: {
                'default': header,
                'left': leftBox,
                'main': mainBox
              }
            }
          ]
        })
    
        // 创建 Vue 实例,得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {},
          methods: {},
          router
        });
      </script>
    </body>
    

  • 相关阅读:
    bzoj 2456 mode
    codeforces 630 I(规律&&组合)
    codeforces 630H (组合数学)
    codeforces 651A Joysticks
    codeforces 651B Beautiful Paintings
    codeforces 625C K-special Tables
    codeforces 630F Selection of Personnel(组合数)
    codeforce 630N Forecast
    后缀数组模板
    Hdu5737-Differencia(有序表线段树)
  • 原文地址:https://www.cnblogs.com/xidianzxm/p/12186274.html
Copyright © 2011-2022 走看看