VueCli

  • Vue的router的理解
  • router与route的区别
  • VueCli怎么使用Router


Vue的router的理解

我们要实现单页应用程序,所以我们要学习路由。

router能够帮助我们组件之间的跳转

下面我们看网易云音乐的例子

Vue路由router以及route与router的区别_vue.js


在头部栏有很多组件,而在我们点击那些组件就会又出现很多组件,这就运用到了嵌套路由。这就是路由的实现

router与route的区别

1.router是VueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象中是一个全局的对象,他包含了所有的路由包含了许多关键的对象和属性。
2.route是一个跳转的路由对象,每一个路由都会有一个route对象,是一个局部的对象,可以获取对应的name,path,params,query等

VueCli怎么使用Router

1、首先创建vuecli项目(这里就不多说了)

2、定义全局路由 声明路由规则

Vue路由router以及route与router的区别_嵌套_02


BrandList是自己创建的组件,在routes下面进行路由的跳转

3、最后进行导出

4、在main.js里进行引入并挂挂载就可以使用了

Vue路由router以及route与router的区别_Vue_03


5、组件上使用(我是默认在App.vue组件上使用的)

Vue路由router以及route与router的区别_Vue_04


router-link进行路由跳转,在我们第一步进行生命路由那里有跳转路径,所以我们直接to="/路径" 就可以了

而router-view呢就是我们点击跳转路由进行显示在哪个地方(单页显示哦)

写的不是很好,新手上路还请多多指教!!