15628812133

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.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代码如下：

image.png

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

 

修改main.js中的代码：

image.png

运行上面代码，

image.png

关键词：
返回列表

相关文章

热门文章

最新文章

相关案例

公司地址：济南市天桥区中凡鲁鼎广场A2009-A2010

联系电话：0531-68961230

Email ： marketing@cnwenhui.cn

0531-68961230

网站首页 产品中心 案例展示 资料库 解决方案 新闻中心 联系我们

山东文汇信息服务有限公司版权所有 济南建网站    鲁ICP备14002804号-1      公安备案号 37010502000882