vue.js 学习第二天: 路由基础篇

首先我们接着上一篇文章继续对vue.框架的学习!

      在这边我们可以学习到

    1):router-link和router-view 组件 

    2):路由的配置:

            a.动态路由的配置

            b.嵌套路由的配置

            c.命名路由的配置

            d.命名视图

    3):js来操作路由

    4):重定向和别名

首先我们理解一下

     我们之前创建的router文件夹下有两个文件1:index.js 2:roter.js  其中index.js是放置 路由列表   而router.js是防放置路由的路径

然后我们看一下App.vue中的标签<router-link to=""></router-link>

其中这个标签其实就是相当于一个<a>标签

 <router-view>是一个视图文件其实这个视图文件都是通过router-link跳转后来展示的一个标签

在我们之前在vue.config.js中配置到过一个简单表示路径的标识:

 这个@符号表示就是 在那个目录下的文件

 

如上图这就是一个路由书写的方法和格式其中

 

这就相当于一个懒加载的路由就是当我们点击的时候回调转这个页面

component: () => import('@/views/About.vue')这是跳转页面的基本写法

 

 

a.动态路由的配置

所谓动态路由就是在跳转路径的时候可以直接拿到路由带出的值如同:

当我们访问路径localhost:8080/#/agrue/名称的时候  在argue页面上面就可以拿到路由上出现的名称  但是在argue.vue的页面上来获取路由的值如图所示:

其中$route是代表的当前对象 

这个动态的路由可以实现组件的重复使用

b.嵌套路由

首先写法:

 

c.命名路由的配置

  主要是关于  name的使用 是通过name来进行跳转的主要实在组件上使用

主要是和路由中的name做好匹配的

其中v-bind 是vue的基础语法  主要用于属性绑定   可以动态切换一些属性的值  

如图中动态切换class的属性

 

  d.命名视图

  命名视图的写法:首先我们知道<router-view/>这个是视图展示的 

  这样我们怎么编写路由呢 

上图就死命名视图的写法其中default代表的默认的当前视图

 

重名名路由的写法:

但是这边只能用return 返回某一个页面

别名的使用方法:

在es6的写法上当我们return 返回的只有一个值的时候我们可以直接进行简写

js控制路由

关于 push/replace的用法

可以实现将url上出现的参数输出到页面上来

最后:我们在这边主要的思想是路由的使用路由就是我们在组件间的相互跳转,不管是使用什么样的路由配置记住一点就是在路由跳转过程冲是可以从路径上拿到参数还有注意组件之前是可以相互引入使用的