01路由 vue创建路由例子,加载重定向，router-link样式，router-view添加动画,

最新推荐文章于 2023-05-16 20:17:55 发布

asdfwxy

最新推荐文章于 2023-05-16 20:17:55 发布

阅读量373

点赞数

分类专栏： vue 文章标签：创建一个路由实例

本文链接：https://blog.youkuaiyun.com/asdfwxy/article/details/102618436

版权

本文介绍了Vue路由的使用，包括从unpkg下载vue-router，通过Vue.use()安装，创建路由实例，实现路由点击事件，页面加载重定向，自定义`router-link`样式，为`router-view`添加动画，以及两种传递参数的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1：直接下载包。
https://unpkg.com/vue-router/dist/vue-router.js
上面链接会一直指向NPM发布最新版本。也可以
https://unpkg.com/vue-router@2.0.0/dist/vue-router.js这样指定版本号下载。

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>//这个放在后面

2：NPM
如果是基于模块开发，必须通过Vue.use()明确安装路由功能。

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)//注册

路由中的七个知识点，#标出。
1：路由创建的小栗子，包括创建一个路由的步骤，
2：渲染路由的点击事件，，
3：页面加载重定向，redirect
4：在路由对象中重写route-link样式，linkActiveClass
5：用包裹为组件添加动画效果。
6：传递参数方式一：在route-link中？分割，&传递多个参数。不动path，获取this.