ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2022-06-13 16:31:12  阅读:140  来源: 互联网

标签:code const 4.0 home vue import router


一,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://www.cnblogs.com/architectforest

         对应的源码可以访问这里获取: 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 

标签:code,const,4.0,home,vue,import,router
来源: https://www.cnblogs.com/architectforest/p/16371302.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有