我们已经创建好了一个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.vue和MyDemo2.vue,分别编写如下代码:
MyDemo1.vue
<template>
<h1>页面一</h1>
</template>
<script>
export default {
}
</script>
MyDemo2.vue
<template>
<h1>页面二</h1>
</template>
<script>
export default {
}
</script>
修改App.vue代码如下:
其中router-link是一个自定义的链接组件,类似于a标签,可以允许在不重新加载页面的情况下更改页面的URL。Router-view为路由的页面出口,匹配到的组件会在此渲染。
修改main.js中的代码:
运行上面代码,
相关文章
热门文章
最新文章
相关案例