VueJS路由使用完全解读

在上一节中，我们学习了VueJS自定义指令和过滤器的用法，自定义Vue指令使用Vue.directive，创建过滤器则是在Vue实例的filters中进行创建。本节我们一起来学习VueJS的路由功能，VueJS没有内置的路由特性，我们需要按照一些额外的步骤来安装它。
一、VueJS安装路由vue-router1、直接从CDN下载vue-router
最新版本的vue-router下载地址为： https://unpkg.com/vue-router@3.0.1/dist/vue-router.js
unpkg.com提供基于npm的cdn链接，上面的链接总是可以获取到最新的版本。我们可以下载并托管它，并将其与vue.js一起使用，如下所示

< script src="http://www.srcmini.com/path/to/vue.js">< /script> < script src="http://www.srcmini.com/path/to/vue-router.js">< /script>

2、使用npm安装
运行以下命令安装vue-router。

npminstall vue-router

3、使用Github
我们可以从GitHub复制这个库，如下所示

git clone https://github.com/vuejs/vue-router.git node_modules/vue-router cd node_modules/vue-router npm install npm run build

二、VueJS路由使用实例下面是一个使用vue-router.js的简单示例。

< div id="app"> < h1>VueJS路由使用实例< /h1> < p> < router-link to="/route1">路由链接1< /router-link> < router-link to="/route2">路由链接2< /router-link> < /p> < !-- route出口 --> < !-- 与路由匹配的组件将在这里渲染 --> < router-view>< /router-view> < /div> < script type="text/javascript"> const Route1 = { template: '< div style = "border-radius:20px; background-color:cyan; width:200px; height:50px; margin:10px; font-size:25px; padding:10px; ">这是路由1< /div>' } const Route2 = { template: '< div style = "border-radius:20px; background-color:green; width:200px; height:50px; margin:10px; font-size:25px; padding:10px; ">这是路由2< /div>' } const routes = [ { path: '/route1', component: Route1 }, { path: '/route2', component: Route2 } ]; const router = new VueRouter({ routes // `routes: routes`的简写 }); var vm = new Vue({ el: '#app', router }); < /script>

文章图片

文章图片
使用路由首先我们需要添加vue-router.js文件。从https://unpkg.com/vue-router/dist/vue-router.js获取代码，并将其保存在vue-router.js文件中。
这里的代码是使用CDN的方式：

< script src="https://unpkg.com/vue-router/dist/vue-router.js">< /script>

在body部分，有一个路由器链接定义如下

< p> < router-link to="/route1">路由链接1< /router-link> < router-link to="/route2">路由链接2< /router-link> < /p>

< router-link> 是一个用于导航到要显示给用户的HTML内容的组件，to属性是目的地，也就是选择要显示内容的源文件。
在上面的代码中，我们创建了两个路由器链接。
查看JS代码部分，其中初始化了路由器，下面创建了两个常量

const Route1 = { template: '< div style = "border-radius:20px; background-color:cyan; width:200px; height:50px; margin:10px; font-size:25px; padding:10px; ">这是路由1< /div>' } const Route2 = { template: '< div style = "border-radius:20px; background-color:green; width:200px; height:50px; margin:10px; font-size:25px; padding:10px; ">这是路由2< /div>' }

这就是当点击router链接时需要显示这些模板。
接下来是route const变量，它定义要在URL中显示的路径。

const routes = [ { path: '/route1', component: Route1 }, { path: '/route2', component: Route2 } ];

路由定义路径和组件，当用户点击路由器链接时，路径即/route1将显示在URL中。
组件接受要显示的模板名称，路由的路径需要与到属性的路由器链接匹配。例如，这里的< router-link to = “path” > < /router-link> 。
接下来，使用下面的代码段为VueRouter创建实例。

const router = new VueRouter({ routes // `routes: routes`的简写 });

VueRouter构造函数将路由作为参数。使用以下代码段将router对象分配给主vue实例。

var vm = new Vue({ el: '#app', router });

执行示例并在浏览器中查看效果，在检查路由器链接时，我们会发现它向活动元素添加了类，如下面的截图所示。

文章图片
添加的类是class = router-link-exact-active router-link-active，活动链接获取类，如上面的截图所示，另一件需要注意的事情是，< router-link> 被渲染为一个标记。
三、路由链接的属性让我们看看更多要传递给< router-link> 的属性。
1、to这是指定< router-link> 的目标路径，点击后，to的值将在内部传递给router.push()，该值需要是字符串或location对象。当使用一个对象时，我们需要绑定它，如下例2所示。

例1:< router-link to = "/route1">路由链接1< /router-link> 渲染为 < a href = http://www.srcmini.com/”#/route”>路由链接< /a> 例2:< router-link v-bind:to = "{path:'/route1'}">路由链接1< /router-link> 例3: < router-link v-bind:to = "{path:'/route1', query: { name: 'Tery' }}">路由链接1< /router-link>//使用查询字符串.

2、replace将replace添加到路由器链接将调用router.replace()而不是router.push()。使用replace时，不会存储导航历史记录，例如：

< router-link v-bind:to = "{path:'/route1', query: { name: 'Tery' }}"replace>路由链接< /router-link>

3、append【VueJS路由使用完全解读】< router-link> 添加append会使路径变成相对路径。如果我们想从路径为/route1的路由链接转到路径为/route2的路由链接，它会在浏览器中显示路径为/route1/route2，例如：

< router-link v-bind:to = "{ path: '/route1'}" append>路由链接< /router-link>

4、tag一般来说< router-link> 会被渲染为一个标签，如果我们想把它渲染成其他的标签，我们需要使用tag = tagname来实现相同的功能，例如：

< p> < router-link v-bind:to="{ path: '/route1'}" tag="span">路由连接1< /router-link> < router-link v-bind:to="{ path: '/route2'}" tag="span">路由链接2< /router-link> < /p>

5、active-class默认情况下，在路由链接处于活动状态时添加的active类是router-link-active。我们可以通过设置与下面代码相同的类来覆盖它。

< style> ._active { background-color: red; } < /style> < p> < router-link v-bind:to="{ path: '/route1'}" active-class="_active">路由链接1< /router-link> < router-link v-bind:to="{ path: '/route2'}" tag="span">路由链接2< /router-link> < /p>

6、exact-active-class默认使用的exactactive类是router-link-exact-active，我们可以使用exact-active-class覆盖它。

< p> < router-link v-bind:to="{ path: '/route1'}" exact-active-class="_active">路由链接1< /router-link> < router-link v-bind:to="{ path: '/route2'}" tag="span">路由链接2< /router-link> < /p>

7、event
一般来说，路由链接的默认事件是点击事件，我们可以使用event属性进行相同的更改。