Vue - day07

41 阅读2分钟

一、集成安装 vue-router

1.1 新建组件

1.2 安装 npm i vue-router

1.3 配置路由(router->index.js文件):

  • 引入:
import {createRouter,createWebHashHistory} from 'vue-router'
import Home from '../views/home.vue'
  • 配置:
const router = createRouter({
    history:createWebHashHistory(),//路由模式
    routers:[
        {
            path:'/home',
            component:Home
        }
    ]
})
  • 导出:
export default router

1.4 注入路由(main .js)

import router from './router/index.js'
app.use(router)

1.5 呈现(App.vue)

<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>

1.6 切换

<router-link to="/home">首页</router-link>

二、动态路由传参(一个参数时候)

2.1 设置形参(router->index.js)

import Detail from '../views/detail.vue'
{
    path:'/detail/:id',//设置形参id
    component:Detail
}

2.2 传递实参

<div v-for="item in 5" :key="item">
  <router-link :to="`/detail/${item}`">动态路由传参{{ item }}</router-link>
</div>

2.3 提取使用

//在路由跳转的目标组件中
<template>
  <div>详情页,{{$route.params.id}}</div>
</template>
<script>
export default {
    created() {
      console.log(this.$route.params);
    },
};
</script>

三、query传参(多个参数时候)

3.1 传递实参

<div v-for="item in 5" :key="item">
  <router-link :to="`/detail01?name=张三&idx=${item}`">query传参{{ item }}</router-link>
</div>

3.2 提取使用

<template>
    <div>
        query传参详情页{{$route.query.idx}}
    </div>
</template>
<script>
    export default {
        created () {
            console.log(this.$route.query);;
        },
    }
</script>

四、嵌套路由(子路由配置)

4.1 新建子组件

4.2 配置路由

{
    path:'/product',
    component:Product,
    children:[
        {
            path:'p1',
            component:P1
        },
        {
            path:'p2',
            component:P2
        },
        {
            path:'p3',
            component:P3
        }
    ]
},

4.3 呈现

<router-view></router-view>

4.4 切换

<ul class="tab">
  <li>
    <router-link to="/product/p1">产品1</router-link>
  </li>
  <li>
    <router-link to="/product/p2">产品2</router-link>
  </li>
  <li>
    <router-link to="/product/p3">产品3</router-link>
  </li>
</ul>

五、编程式导航(替代router-link)及参数传递

通过事件的方式触发路由跳转

<ul class="tab">
  <li @click="handleJump('p1')">产品1</li>
  <li @click="handleJump('p2')">产品2</li>
  <li @click="handleJump('p3')">产品3</li>
</ul>
methods: {
    handleJump(target){
      // 编程式导航
      // this.$router.push(`/product/${target}`)
      // 编程式导航及传参
      this.$router.push({
        path:`/product/${target}`,
        query:{
          name:'张三',
          sex:'女'
        }
      })
    }
  },
//子组件提取
<template>
  <div>产品1子组件{{ $route.query.name }}</div>
</template>

<script>
export default {
  created() {
    console.log(this.$route.query);
  },
};
</script>

六、路由命名

{
    path:'/product',
    component:Product,
    children:[
        {
            path:'p1',
            name:'my-p1',
            component:P1
        },
        {
            path:'p2',
            name:'my-p2',
            component:P2
        },
        {
            path:'p3',
            name:'my-p3',
            component:P3
        }
    ]
},
methods: {
    handleJump(target){
      this.$router.push({
        name:`my-${target}`
      })
    }
  },

七、命名视图

使用场景:多个页面需要同一个组件

{
    path:'/home',
    components:{
        default:Home,
        foot:Footer
    }
},
<router-view name="foot"></router-view>

八、重定向和别名

8.1 重定向

//当访问/的时候自动跳转到/home
{
    path:'/',
    redirect:'/home'//重定向
},

8.2 别名

path: '/home',
alias:'/',//别名

九、路由模式

9.1 history模式

项目上线的时候,如果后端不协助处理,项目访问会出现404

history:createWebHistory(),

9.2 hash模式

开发跟上线都可以直接使用

history: createWebHashHistory()

十、路由的懒加载

让组件的资源在访问相关的路由的时候再进行加载,不采用懒加载可能会导致首页白屏、首页打开速度慢

{
    path: '/contact',
    component:()=>import('../views/contact.vue')
},

十一、路由的组合式API

内部没有this

<script>
import {useRoute,useRouter} from 'vue-router'//Hook函数
export default {
  setup () {
    let route = useRoute()//此route等同于this.$route
    console.log(route.query);

    let router = useRouter()//此route等同于this.$router
    return {}
  }
}
</script>

十二、路由404

{
    path:'/:pathMatch(.*)*',
    component:()=>import('../views/not-find.vue')
}

十三、element-plus组件库

13.1 安装

npm install element-plus //生产依赖[https://element-plus.gitee.io/zh-CN/guide/installation.html]
npm install -D unplugin-vue-components unplugin-auto-import //开发依赖[https://element-plus.gitee.io/zh-CN/guide/quickstart.html#%E6%8C%89%E9%9C%80%E5%AF%BC%E5%85%A5]

13.2 在vue.config.js中配置

Vue CLI

const { defineConfig } = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports = defineConfig({
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  },
})

13.3 重启项目

13.4 复制需要的组件