路由的完整使用

多页面和单页面

多页面是指超链接等跳转到另一个HTML文件,单页面是仍是这个文件只是路由改变了页面的一部分结构.

路由的基本使用

使用vue2,则配套的路由需要是第3版.

1)下载vue-router插件

2)引入导出函数

3)new 创建路由对象

4)当写到vue的router后只能写路由对象,因此只能写一个.

5)应用到vue实例上,vue去渲染时会有路由.

当写Vue.use(路由函数)会对这个Vue生成的所以实例,无论是否一个文件,只要访问的时Vue,都会使得生成的实例对象会响应式router,以及axios时一个库,而路由只是一个插件.

1)写在vue实例上的路由对象生成时,对象配置routes数组,数组内的对象,path是路径,后面componnet组件.,当路径是/#/路由路径,则会仍生成前面的html文件,将该文件当中的router-view,将生成的组件替代这.,则实例内根目录的所有组件,path配置无需#/,在a标签上写href="#/friend"跳转当前的路径/#/

组件目录分类问题

将与路由有关的vue文件放到src/view文件夹下,普通组件,则放到components文件夹下

便于管理

路由的封装

将路由对象生成的所有步骤放置在src/router/index.js文件内,导出如有对象,便于管理.

已经执行下列步骤的vue函数,会对导出的

router-link标签

在包含router-view的路径文件下,写router-link标签,会生成DOM对象是A对象,会生成href

写to,生成的a对象,找的是to属性.编译成a对象,以及会给给每个a对象设置了,如果是含义路由路径

与a的href相同则,给a添加默认的,当处于另一个,会将其他的所在的router-link进行删除类.当路由

可以将上面的两个类改成自定义的类名'

当访问router对象内的这些变量.访问不到就用默认的呗.

疑问:必须配置router才能有router-link标签嘛?

路由传参(传到生成的组件内的vue实例)

1)查询参数传参

在router-link标签的to属性

<router-link    to="/search?key=1">跳转页面时,会给router-view,生成组件的实例添加this.$route.query对象,对象内含有属性值和属性名.

这里跳转的组件,和new 路由的对象,必须path是相同的.

2)动态路由传参

可以匹配/search

在这里写好,可以配置所有的/search/路径名,不能只是/search都会配置这个组件,且创建组件时会生成$route.params.words传过去.

路由重定向

在vue实例的router对象,则path:/会自动将路径变为/home.

寻找时是从上往下,*表示所有的路由组件,则显示之后的组件,如果是redirect则是跳转.

改变模式

路由的跳转方式

路由的跳转

路由的跳转传参

1-----

this.$route.query

2-------

$router.params.words

3-------

VueCli自定义创建项目

可以生成路由,不用手动去写路由

1)创建项目

2)选择第三个非vue2或vue3

3)勾选bable/router/css/linter勾选linter后所写的项目内必须是符合对应的规则,否则报错,比如运算符左右含有空格.不能有分号.

路由选3,vue2,

路由4,vue3

默认是history.hash模式.

使用less插件解析css

第三个无分号规则.

list on save 保存时校验

第一个将配置文件放到单独文件

是否保存以上配置.

但是以上会报错,但是没有高亮/错误显示

写这个项目,需要只拖入项目文件夹.

vscode的Eslint可以显示错误高亮

自动修正

可以保存时使其修改能修改的错误格式上的,但是变量没有使用但是定义这种不行,下面的是不讲代码格式化.

连续点击两次事件是,dblclick 在标签上绑定是V-on:dblclick @dblclick

有关传参的研究

1)事件对象@click上的传参

当不写()时的调用比如

@click="change"

则change方法调用自动传递e事件对象参数

当写了(),则只会传递()内的参数,无论()内是否书写,但是(),调用写了$event,是会事件对象给这个参数.

2)$emit触发事件的传参

只会传递后面所写的参数,没有就不传.