Vue Router的安装和简单使用

我们已经创建好了一个Vue项目工程,首先我们采用NPM的方式来安装Vue。打开IDEA的终端面板,使用终端在根目录下执行如下指令来安装vue router模块:

npm install vue-router@4 -s

 

若安装成功,项目的package.json文件中会自动添加Vue Router的依赖。例如:

"dependencies": {

 "axios": "^1.3.5",

 "core-js": "^3.8.3",

 "vue": "^3.2.13",

 "vue-axios": "^3.5.2",

 "vue-router": "^4.1.6"

},

成功添加依赖后,便可以对Vue Router进行使用了。其中心思想是将定义好的Vue组件绑定到指定的路由,然后通过路由指定在何时何处渲染这个组件。

 

首先,在工程的components文件夹下新建两个文件,分别命名为MyDemo1.vueMyDemo2.vue,分别编写如下代码:

 MyDemo1.vue

 

<template>

    <h1>页面一</h1>

</template>

<script>

    export default {

 

    }

</script>

MyDemo2.vue

 

<template>

    <h1>页面二</h1>

</template>

<script>

    export default {

 

    }

</script>

 

修改App.vue代码如下:

image.png

其中router-link是一个自定义的链接组件,类似于a标签,可以允许在不重新加载页面的情况下更改页面的URLRouter-view为路由的页面出口,匹配到的组件会在此渲染。

 

修改main.js中的代码:

image.png

运行上面代码

image.png

关键词:
返回列表

相关文章

相关案例