Vue2.0中常用到的知识点汇总（二）

最新推荐文章于 2024-08-21 10:43:34 发布

风里有诗句哈

最新推荐文章于 2024-08-21 10:43:34 发布

阅读量222

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/Vansal/article/details/91558657

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

路由

重定向：

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

激活路由高亮：

// 默认样式
.router-link-active

路由切换动画：

<transition mode='out-in'>
  <router-view></router-view>
</transition>

路由传参

第一种方式：使用query方式传参

router-link中的to属性中定义参数，显示的路由使用this.$route.query.id获取参数

<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>',
  methods: {
    get () {
      console.log(this.$route.query.id)
    }
  },
  created () {
    this.get()
  }
}

var register = {
  template: '<h1>注册</h1>'
}

var router = new VueRouter({
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/login', component: login },
    { path: '/register', component: register }
  ]
})

// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
  el: '#app',
  data: {},
  methods: {},
  // router: router
  router
})
</script>
</body>

第二种方式：使用params方式传参

路由匹配规则中加入path: '/login/:id/:name'，在<router-link to="/login/10/zs">传递参数

params方式有一个缺点，路由重定向会失败

<body>
<div id="app">
    <!-- 如果在路由中，使用 查询字符串，给路由传递参数，则 不需要修改 路由规则的 path 属性 -->
    <router-link to="/login/10/zs">登录</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>',
  methods: {
    get () {
      console.log(this.$route.params)
    }
  },
  created () {
    this.get()
  }
}

var register = {
  template: '<h1>注册</h1>'
}

var router = new VueRouter({
  routes: [
    { path: '/', redirect: '/login' },
    { 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>

嵌套路由

<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 前面，不要带 / ，否则永远以根路径开始请求
          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>

命名视图实现经典布局

<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: '/', components: {
            'default': header,
            'left': leftBox,
            'main': mainBox
          }
        }
      ]
    })

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router
    });
  </script>
</body>