Vue基础-04

本节依旧是明歌的视频

一、路由的安装和配置

（1）在项目终端下载路由：

npm install vue-router@4

package.son可以看到整个项目的所有依赖，package-lock.json更详细一点。

下载完路由，在这里看到有router就说明安装好了。

 （2）在main.js文件配置成这样。

let routes这里面是配置路由的地址，要创建出对应的路径和文件，否则会报错。

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

//1.引入路由
import { createRouter, createWebHashHistory} from 'vue-router'


//2.路由配置
let routes = [
    { path: '/', component: () => import('../views/Login.vue') },
    { path: '/test', component: () => import('../views/Test.vue') },

]
const router = createRouter({
    history: createWebHashHistory(),//路由的形式。hash形式就是会在浏览器路径会有个#
    routes
})

//3.原来的路由的挂载：createApp(App).mount('#app')，改成下面这样
let app = createApp(App)
app.use(router)
app.mount('#app')

PS：vue3框架代码写 vbase3-setup

<template>

    <div></div>
</template>

<script setup>

</script>

<style scoped>
</style>

 （3）在APP.vue文件，配置路由的视图.这个插件里面不能加任何内容，不然页面会不显示

  <router-view></router-view>

 这样路由就配置完了。

然后发现页面有点距离，则在index.vue里面去掉所有的padding和margin的值。

 二、路由的使用

Test页面点击之后通过路由传值给Login页面。

test页面：

（1）引入路由 （2）注册路由 （3）route.push跳转

<template>
    <div>test</div>
    <div>
        <button @click="oneClick">按下天天，出现彩虹</button>
    </div>
</template>

<script setup>
//1、引入路由
// import { ref, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'

//2、注册路由
const router = useRouter()
const route = useRoute()//获取上级路由传参

//3、使用路由跳转传值的方法
function oneClick() {
    router.push({
        path: '/',
        query: {//传参
            name: "彩虹",
            id: 1,
        },
    })

}

</script>

<style scoped>
</style>

 login接收数据的页面：

1.引入路由  2.注册路由  3.赋值到当前页面 

<template>

    <div>Login</div>
    {{ info.id }}----{{ info.name }}
</template>

<script setup>

//1、引入路由
import { useRouter, useRoute } from 'vue-router'
import { ref, reactive } from 'vue'//引入要用的模块


//2、注册路由
const router = useRouter()
const route = useRoute()//获取上级路由传参


console.log(reactive)//输出获取的数组

let info = reactive({//3.赋值到当前页面
    id: route.query.id,
    name: route.query.name,

})
</script>

<style scoped>
</style>

三、二级路由的使用

 

（1）路由跳转：1.引入路由 2.路由注册 3.写方法，使用router.oush跳转路径。

 代码

<template>
    <div>后台管理首页</div>
    <div style="display:flex">
        <div>
            <button @click="oneClick">跳转page1</button>

            <button @click="twoClick">跳转page2</button>
        </div>

        <router-view></router-view>
    </div>
</template>

<script setup>
//1、引入路由
import { useRouter, useRoute } from 'vue-router'

//2、注册路由
const router = useRouter()
const route = useRoute()//获取上级路由传参

//3、使用路由跳转传值的方法
function oneClick() {
    router.push({
        path: '/main/page1',

    })

}
function twoClick() {
    router.push({
        path: '/main/page2',

    })

}
</script>

<style scoped>
</style>

传参的方式传路由

<template>
    <div>后台管理首页</div>
    <div style="display:flex">
        <div>
            <button @click="oneClick('page1')">跳转page1</button>

            <button @click="twoClick('page2')">跳转page2</button>
        </div>

        <router-view></router-view>
    </div>
</template>

<script setup>
//1、引入路由
import { useRouter, useRoute } from 'vue-router'

//2、注册路由
const router = useRouter()
const route = useRoute()//获取上级路由传参

//3、使用路由跳转传值的方法
function oneClick(val) {
    router.push({
        path: '/main/' + val,

    })

}
function twoClick(val2) {
    router.push({
        path: '/main/' + val2,

    })

}
</script>

<style scoped>
</style>

（2）main.js的二层路由配置

let routes = [

    {
        path: '/main', component: () => import('./views/main.vue'),
        children: [{ path: '/main/page1', component: () => import('./views/Page1.vue') },
        { path: '/main/page2', component: () => import('./views/Page2.vue') }]
    },


]