Vue学习Day11 router-link属性、动态路由、路由的懒加载、嵌套路由、路由的参数传递、代码跳转路由

想利用暑假时间好好学习一下vue，会记录每一天的学习内容。
今天是学习vue的第11天！

起起伏伏乃人生常态，继续加油～

---

---

1. router-link属性

在前面的<router-link>中，我们只是使用了一个属性：to，用于指定跳转的路径

<router-link to="/Home">首页</router-link>
<router-link to="/About">关于</router-link>

<router-link>还有一些其他属性

---

tag

tag：可以指定<router-link>之后渲染成什么组件，如果不想要其默认渲染出的<a>，比如渲染成<button>

<router-link to="/Home" tag="button">首页</router-link>
<router-link to="/About" tag="button">关于</router-link>

---

replace

replace：不会留下history记录，所以指定replace的情况下，浏览器的后退键被禁用，无法返回到上一个页面中(默认应该用的是pushState())

---

active-class

active-class：当<router-link>对应的路由匹配成功时，会自动给当前元素设置一个类为router-link-active

• 某些需要高亮显示的导航菜单可能会使用到该类

可以在<router-link>中设置active-class可以修改默认名称

<router-link to="/Home" tag="button" replace active-class="active">首页</router-link>
<router-link to="/About" tag="button" replace active-class="active">关于</router-link>

也可以通过在router实例中设置linkActiveClass修改默认名称

（但是通常不会改类名，直接叫router-link-active就好）

---

2. 通过代码跳转路由

有时候，页面的跳转可能需要执行对应的一些js代码，这时候就可以使用第二种跳转方式：

这里使用了.$router.push()，同样也可以用.$router.replace()，效果是一样的，只是无法后退页面

但是这样还有一个小问题，就是当我们重复点击同一个导航时，控制台会报出错误。

大概是vue为了避免重复点击相同路由的一种警告机制(?，虽然不会影响页面效果，但是放着不管也不太好。解决方法应该不少，我这里通过在代码中加了判断句来解决：

---

3. 动态路由

在某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户个人界面时，希望是如下的路径：

• /user/aaaa或/user/bbbb
• 除了有前面的/user之外，后面还跟上了用户的ID
• 这种path和Component的匹配关系，我们称之为动态路由(也是路由传递数据的一种方式)

具体实现

在路由映射配置中添加如下配置：
:后的名字可以自取，不一定是UserId

使用<router-link>，to属性是用于指定链接，我们这里的链接其实应该不是固定的，比如/User/后接的应该是某个用户的id，所以应该用v-bind动态绑定to属性：
（/User/在此处是固定的，放单引号里就ok）
特别⚠️一下： data是个函数，不要写成对象！

成功显示：

如果想把这个URL上的userid显示在页面中：在User.vue中利用$route.params

看一下目前会显示什么

我们想拿到的是这个对象的值，所以应该改为：

{{$route.params.UserId}}

这个params后面接的也就是我们在路由映射配置中的:后的名字：

当然了这个url中的userid也可以通过location对象获取，再截取就好了
这里只是提供一种方法

---

4. 路由的懒加载

当打包构建应用时，Javascript包会变得非常大，影响页面加载

• 如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样会更高效

说得通俗点：
我们知道路由中通常会定义很多不同的页面，一般情况下页面是放在一个js文件中，但是那么多的页面放在一个js文件中，必然会造成这个页面非常大
如果我们一次性从服务器请求下来这个页面，可能需要花费一定的时间，甚至用户屏幕可能出现短暂的空白
要避免这种情况，使用路由懒加载就可以了

路由懒加载：

• 主要作用是将路由对应的组件打包成一个个的js代码块
• 只有在这个路由被访问到的时候，才加载对应的组件

懒加载的方式

方式一：结合Vue的异步组件和Webpack的代码分割
（早期写法，不推荐，认识即可）

const Home = resolve => { require.ensure(['../components/Home.vue'], () => { resolve(require('../components/Home.vue')) })};

方式二：AMD写法

const Home = resolve => require(['../components/Home.vue'], resolve);

方式三：在ES6中，我们可以有更简单的写法来组织Vue异步组件和Webpack的代码分割

const Home = () => import('../components/Home.vue');

这里我们选用ES6的方式：

（但我统一放到了上面，便于一起管理）

然后再打包文件，对比未使用懒加载之前的dist文件夹，会发现新生成的dist文件夹中多了6个文件，应该就是三个组件及其对应的map文件

前：

后：

---

5. 嵌套路由

嵌套路由是个很常见的功能：

• 比如在home页面中，我们希望通过/home/news和/home/message访问一些内容，也就是在之前的基础上更加细分
• 由于一个路径映射一个组件，因此访问这两个路径也会分别渲染两个组件

路径和组件的关系如下：

实现嵌套路由的步骤：

• 第一步：创建对应的子组件，并且在路由映射中配置对应的子路由
• 第二步：在组件内部使用<router-view>标签

具体实现

我们就实现上面那个例子：

第一步：
先创建两个组件文件：

配置路由映射：
要放在组件Home的对象里（注意news和messages跟其他组件并不是同级关系）
使用这个children属性来放一些子组件，同样也是一个映射关系一个对象
⚠️⚠️：子路由的路径不要加斜杠，也不用加/Home啥的
(同样也采用路由的懒加载)

第二步：
我们需要用<router-view>来显示这两个子组件，那么应该把它放在哪里？
此时放在App.vue显然是不合适的，因为这个<router-view>是负责显示父级导航的内容

应该把它放在这两个子组件的父组件，Home.vue文件中，而且要使用一下<router-link>来当导航

现在已经可以成功切换并显示了：


但是依然有不足，这个问题上面也提到过，当显示Home页时，也应该要将新闻页默认显示出来

其实就是配置路由的默认路径，在前面我们已经学过，只是子组件是放在children属性里，父组件是放在routes属性里

---

6. 命名视图

在路由配置中，一般情况下一个路由只能对应一个组件，若想对应多个组件，必须得作为子组件存在，然后在一个共用的视图内显示，这是一个路由对应多个组件，这些组件对应一个视图

但是有时候如果想同时展示多个视图，而不是嵌套展示，比如创建一个布局，有侧导航和主内容两个视图，这时候就可以用命名视图

如果router-view没有设置名字，则默认为default

const routes = [
	{
		path: '/home',
		// 注意这里是components，要加s
		components: {
			default: () => import('../components/layout/sidebar.vue'),
			main: () => import('../components/layout/main.vue'),
		}
	}
]

对应router-view：

<router-view></router-view>
<router-view name="main"></router-view>

7. 路由的参数传递

当我们切换组件时，我们可能希望传递一些参数

传递参数的方式

传递参数主要有两种类型：params和query

params类型：

• 配置路由映射的格式：/router/:id
• 传递的方式：在to属性指定的链接后面，要跟上对应的值
• 传递后形成的路径：/router/123，/router/abc

query类型：

• 配置路由映射的格式：/router，也就是正常配置不用变
• 传递的方式：在对象中使用query的key作为传递方式
• 传递后形成的路径：/router?id=123，/router?id=abc

params类型其实前面userid那里用过，这里就用query类型：

(我新建了一个Profile组件，并且已经做好了相关配置，跟前面一样的操作)

然后如果想要传递参数，to属性的值不能是个字符串了，必须是个对象，而且注意要用v-bind动态绑定to属性，才能使对象生效
path属性自然就是要跳转的链接，而query属性对应的也是一个对象

<!-- <router-link to="/profile">档案</router-link> -->
<router-link :to="{path: '/profile', query: {name: 'AIpoem', age: 19, height: 1.88}}">档案</router-link>

可以看到路径已经成功变化了：

如果想拿到query：
用$route.query就可以
(同理，params用$route.params)

---

如果进行跳转的时候，不是通过<router-link>，而是通过代码跳转呢？
比如这里用一个button，希望在跳转的同时传递一些数据过去：

 <button @click="profileClick">档案</button>

还记得上面的$router.push吗？

同理可得：只是这里要传一个对象进去

profileClick() {
	this.$router.push({
		path: '/profile',
        query: {
          name: 'AIpoem',
          age: 19,
          height: 1.88
        }
	})
}

---