vue.js3: 安装使用vue-router(vue-router@4.0.16 / vue@3.2.37)

一，vue-router的官网:

1,官网:

https://router.vuejs.org/

2,在npmjs的地址:

https://www.npmjs.com/package/vue-router

3,文档地址:

https://router.vuejs.org/zh/introduction.html

说明：刘宏缔的架构森林是一个专注架构的博客，

网站：https://blog.imgtouch.com
本文: https://blog.imgtouch.com/index.php/2023/06/01/vue-js3-an-zhuang-shi-yong-vuerouter-vuerouter-4-16-vue-3-2/

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，安装vue-router

1,从命令行安装

liuhongdi@lhdpc:/data/vue/touch$ npm install --save vue-router@4
 
added 2 packages in 3s

2,查看vue-router安装的版本:

liuhongdi@lhdpc:/data/vue/touch$ npm list vue-router
touch@0.1.0 /data/vue/touch
└── vue-router@4.0.16

三，代码:

1,创建两个页面:

views/code/Code.vue

<template>
<div style="width:100%;min-height:500px;background: #eeeeee;">
  <button @click="goLink">去首页</button>
</div>
</template>

<script>
import {useRouter,useRoute} from "vue-router";
import {onMounted} from "vue";
export default {
  name: "CodeImg",
  setup() {
    const router = useRouter();
    const Route = useRoute();
    onMounted(() => {
      console.log("获取到的参数:", Route.query);
      console.log("获取到的参数codeId:", Route.query.codeId);
    });

    const goLink = () => {
        router.push({ name: 'home', query: { homeId: "hello" }});
        //router.push({ path: '/home/home', query: { homeId: "hello" }});
    }
    return {
      goLink,
    }
  }
}
</script>

<style scoped>

</style>

views/home/Home.vue

<template>
  <div style="width:100%;min-height:500px;background: #eeeeee;">
    <router-link :to="{ path: '/code/code', query: { codeId: 123 }}">
    去code二维码页面
    </router-link>
  </div>
</template>

<script>
import {onMounted} from "vue";
import {useRoute} from 'vue-router'

export default {
  name: "HomePage",
  setup() {
    const Route = useRoute(); //获取到值
    onMounted(() => {
      console.log("获取到的参数:", Route.query);
      console.log("获取到的参数:", Route.query.homeId);
    });
  }
}
</script>

<style scoped>
</style>

2,创建js文件:

route/index.js

import {createRouter, createWebHashHistory} from 'vue-router';
const Home = () => import("../views/home/Home")
const Code = () => import("../views/code/Code")

const routes = [
    {
        path: "/",
        redirect: '/home/home'
    },
    { path: "/home",
        component: Home,
        redirect: '/home/home',
        children: [
            { path: 'home', name: "home",meta:{title:"网站首页",top:"0"}, component: Home },
        ]
    },
    {
        path: "/code",
        component: Code,
        redirect: '/code/code',
        children: [
            { path: 'code', name: "code",meta:{title:"二维码",top:"0"}, component: Code },
        ]
    }
]

// Vue-router新版本中，需要使用createRouter来创建路由
export default  createRouter({
    // 指定路由的模式,此处使用的是hash模式
    history: createWebHashHistory(),
    routes // short for `routes: routes`
}) 

3,在main.js中调用route

import { createApp } from 'vue'
import App from './App.vue'
import router from './route'

const app = createApp(App)
app.use(router)
app.mount('#app')

4,app.vue

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

<script>
export default {
  name: 'App',
  components: {
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 0px;
}
html,body {
  margin: 0;
  height:100%;
}
</style>

说明：把默认的HelloWorld替换成<router-view />

四，测试效果

 

 

五，查看vue的版本:

liuhongdi@lhdpc:/data/vue/touch$ npm list vue
touch@0.1.0 /data/vue/touch
├─┬ @vue/cli-plugin-babel@5.0.4
│ └─┬ @vue/babel-preset-app@5.0.4
│   └── vue@3.2.37 deduped
├─┬ vue-router@4.0.16
│ └── vue@3.2.37 deduped
└─┬ vue@3.2.37
  └─┬ @vue/server-renderer@3.2.37
    └── vue@3.2.37 deduped