vue核心组件 vue-router 入门
前端编写网页,很重要的一个部分就是页面之间 的跳转,路由问题,一个网站有很多页面 也许10个,也许20个或者更多,怎么实现这些页面之间的跳转呢,html里我们使用<a>标签跳转,<a href="xxx.html">xxx</a>JavaScript里我们使用window.location=&q
前端编写网页,很重要的一个部分就是页面之间 的跳转,路由问题,一个网站有很多页面 也许10个,也许20个或者更多,怎么实现这些页面之间的跳转呢,
html里我们使用<a>标签跳转,
<a href="xxx.html">xxx</a>
JavaScript里我们使用window.location="url"跳转,
window.location="xxx.html"
但是今天我要讲的是vue,使用核心插件 vue-router;
首先我们先要安装vue-router ,在 项目文件夹 打开命令行 输入 npm i vue-router -D
在main.js 中引入vue-router
import VueRouter from 'vue-router'
并且使用这个插件
Vue.use(VueRouter)
接着导入你想要路由的vue组件
import xxx from './xxx.vue'
....
....
接着创建vue-router实例 ,并编写路由规则routes
const router =new VueRouter({ //这里有个小细节,没写const,会报错.
mode:'history', //不写这个,url会出现#号 如 localhost:8080/#/xxx
routes:[
{path:'/xxx',component:'xxx'},这里的xxx与你导入的vue组件想对应
{............}
]
})
在app.vue(或者你想要显示的组件)使用<router-view>,用于显示跳转页面内容(router-view相当于一个窗口,xxx.vue的内容通过这里显示,如果template里的div 只有一个router-view子节点,相当于整页,如果还有其他的子节点 如<div>我是底部</div>,则还是会显示在 router-view的下面)
//app.vue
<template>
<div>
<router-view></router-view>
</div>
</template>
做到这里,你已经可以在地址栏中手动修改url来达到跳转的目的了,但是这样显然还不能满足我们的需求:点击 页面中的图片/按钮/链接来实现跳转,这个时候我们就要 用到 router-link 标签了
//app.vue
<template>
<div>
<router-view></router-view>
<ul>
<li>
<router-link to="/xxx"> xxx </router-link> //方式一 to:"./xxx"
</li>
<li>
<router-link :to="{name:'xxx'}"> xxx2 </router-link> //方式二 :to="{name:'xxx'}"
</li>
.....
</ul>
</div>
</template>
上述 2种方式 ,方式一 字符串写死, 不好修改维护.
方式二 :to 数据绑定方式 ,更灵活 不过需要对main.js中的 路由规则 routes做修改
routes:[
{name:'xxx' ,path:'/xxx',component:xxx}, //这里的name写什么,router-link里的:to="{}" 就写什么
........
]
到这里,基本上能实现我们想要的点击页面元素实现跳转了.
这篇文章只属于入门,还需大家多多专研
更多推荐
所有评论(0)