vue 框架相关指令

文章目录

以下指令都是在vue3下

1. 点击跳转组件

<template>
  <div class="home">
    <h1>这是home页面</h1>
    <button @click='change'>点击组件跳转</button>
  </div>
</template>

<script>
export default {
  methods:{
    change(){
    // 跳转到about组件（通过path）
      this.$router.push({path: '/about'})
     //  跳转到about组件（通过name）
      this.$router.push({name: 'About'})
    }
  }
}
</script>

// 路由
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

2. hash 和 history

在vue-router 中路由配置有两种模式 hash 和 history

默认情况是hash模式

hash 模式下的地址： http://127.0.0.1:8080/#/about
history 模式下的地址: http://127.0.0.1:8080/about

hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [{
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/about',
        name: 'About',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () =>
            import ( /* webpackChunkName: "about" */ '../views/About.vue')
    }
]

const router = new VueRouter({
    routes,
    mode: 'history'
        // mode: 'hash'
})

export default router

3. router-view

<router-view/>
显示当前路由地址对应的内容