vue核心组件 vue-router 入门

前端编写网页,很重要的一个部分就是页面之间 的跳转,路由问题,一个网站有很多页面 也许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="{}" 就写什么
		........
	]

到这里,基本上能实现我们想要的点击页面元素实现跳转了.

这篇文章只属于入门,还需大家多多专研