VueRouter的简单使用

最新推荐文章于 2024-11-29 10:02:06 发布

tongxintong

最新推荐文章于 2024-11-29 10:02:06 发布

阅读量180

点赞数 1

CC 4.0 BY-SA版权

分类专栏： VUE

本文链接：https://blog.youkuaiyun.com/tongxintong/article/details/84488119

VUE 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍如何在Vue.js项目中设置和使用路由。从创建VueRouter实例开始，通过定义路由规则和组件，到在入口文件中配置Vue实例，实现页面间的导航和动态参数传递。文章还展示了如何在组件中获取路由参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 有一个HTML文件里的DOM元素（的id）作为vue实例挂载的入口；

2.创建VueRouter文件；

import Vue from 'vue';
import VueRouter from 'vue-router';//import VueRouter
import HelloWorld from '../components/HelloWorld';
import User from '../components/User';

Vue.use(VueRouter);// use VueRouter
//create VueRouter
export default new VueRouter({
    routes: [
        {
            path: '/',//root path
            component: HelloWorld,
        },
        {
            path: '/user/:id',//dynamic path
            component: User,
        }
    ],
});

3. 创建Vue入口文件

import Vue from 'vue';
import router from './router/index'
new Vue({
    el:'#app',//mount point ,id of dom element in html
    router,//the VueRouter in step2

    //<--!router view,will be fulfilled by content of User.vue-->
    template: `
    <div>
      <router-view></router-view>
    </div>
    `,
});

4. 创建vue组件 User.vue

<template>
<!--NOTE: here is 'route',not 'router'-->
  <div>User--> {{this.$route.params.id}}</div>
</template>

<script>
    export default {
        name: "User",
        data() {
            return {
            }
        },
    }
</script>

<style scoped>

</style>

5. 创建HelloWorld.vue

<template>
  <div>
    <router-link to="/e/user/foo">/user/foo</router-link>
    <router-view></router-view>//加入这个就是本页面跳转，不加就跳转到下个页面
  </div>
</template>

<script>
    export default {
        name: "HelloWorld"
    }
</script>

<style scoped>

</style>