Vue-Router的使用方法

2024-05-06 15:30:38

字体：大中小

来源：转载

供稿：网友

使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生。

路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 => home 内容， about按钮 => about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。

点击之后，怎么做到正确的对应，比如，我点击home 按钮，页面中怎么就正好能显示home的内容。这就要在js 文件中配置路由。

官方文档： https://router.vuejs.org/zh-cn/essentials/getting-started.html

Vue-Router的最简单使用

1.先注册路由

2.将路由注册到VM组件中

3.定义组件

4.页面定义跳转路径

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title></title>    <script src="lib/vue.min.js"></script>    <script src="lib/vue-router-3.0.1.js"></script>    <style type="text/css">    </style>  </head>  <body>        <div id="app">      <!--        由于Vue-router的hash匹配原则所以我们需要在原定义的路径上加一个#号      -->      <a href="#/login" rel="external nofollow" rel="external nofollow" >登录</a>      <a href="#/register" rel="external nofollow" rel="external nofollow" >注册</a>      <router-view></router-view>    </div>  </body>  <script>    var login={      template:'<h1>登录组件</h1>'    }    var register={      template:'<h1>注册组件</h1>'    }    var routerObj = new VueRouter({      routes:[      //此处的component只能使用组件对象，而不能使用注册的模板的名称        {path:"/login",component:login},        {path:"/register",component:register}      ]    })    var vm = new Vue({      el:'#app',      data:{      },      methods:{              },      router:routerObj//将路由规则对象注册到VM实例上    })  </script></html>

使用Router-Link替代a标签

这么做主要是为了去掉a标签中的为了匹配hash地址的“#”,如下

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title></title>    <script src="lib/vue.min.js"></script>    <script src="lib/vue-router-3.0.1.js"></script>    <style type="text/css">    </style>  </head>  <body>        <div id="app">      <!--        由于Vue-router的hash匹配原则所以我们需要在原定义的路径上加一个#号      --><!--      <a href="#/login" rel="external nofollow" rel="external nofollow" >登录</a>      <a href="#/register" rel="external nofollow" rel="external nofollow" >注册</a>-->      <router-link to="/login" tag="span">登录</router-link>      <router-link to="/register">注册</router-link>      <router-view></router-view>    </div>  </body>  <script>    var login={      template:'<h1>登录组件</h1>'    }    var register={      template:'<h1>注册组件</h1>'    }    var routerObj = new VueRouter({      routes:[      //此处的component只能使用组件对象，而不能使用注册的模板的名称        {path:"/login",component:login},        {path:"/register",component:register}      ]    })    var vm = new Vue({      el:'#app',      data:{      },      methods:{              },      router:routerObj//将路由规则对象注册到VM实例上    })  </script></html>

上一篇：vue 监听屏幕高度的实例

下一篇：使用elementUI实现将图片上传到本地的示例