- 路由强制跳转 {path:'/',redirect:'/login'} 这样，可实现在url输入根路径，自动跳转到/login，然后显示login组件。相比于 {path:'/',component:login}实现根路径显示login组件，逻辑更好。想想看，用户在/，即可看到登陆组件，点击登陆超链接，url变为/login，还是照常显示登陆组件。用户会不会怀疑两个登陆组件是否是同一个组件，功能是否相同呢？
- 点击<a>或者<router-link>后，会自动给他们加一个class属性，值为router-link-active。这样，通过给改类设置css，即可轻易实现 点击 登陆/注册， 字体大小粗细颜色等变化，以提醒用户所在逻辑层 等功能 。而且，这个class属性的默认值router-link-active，可以在路由构造函数里配置，如下。这样可以实现点击显示其他已创建的样式。
const router = new VueRouter({ routes: [ { path: "/account", component: account, children: [ { }, {}, ], }, ], linkActiveClass:'myLink' });
- 查询字符串（URL参数） 路由传参，储存在路由实例的query属性中。
用法： 将“？”放在URL的末尾，然后再加上“参数＝值”，想加上多个参数的话，使用“&”。以 这个形式，可以将想要发送给服务器的数据添加到URL中。不需要修改path匹配规则。 可以 用于电商广告，如统计流量从哪里来。
-
使用params方式传递路由参数
<router-link to="/user/4429">登陆</router-link>
{path：'/user/:id',component:Liu}
//匹配到user后，自动将user后的字符串，作为id属性的值，
//存入路由实例的params中。中国$route.params.id直接可访问到- 命名视图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<style>
.head {
width: 100%;
height: 20%;
background-color: green;
}
.left {
width: 30%;
height: 90px;
background: yellow;
}
</style>
</head>
<body>
<div id="app" style="height: 2000px; width: 100%">
<router-view></router-view>
<div style="display: flex">
<router-view name="left"></router-view> //指定组件名称在此处显示
<router-view name="main"></router-view>
</div>
</div>
<script>
//创建组件
var header = {
template: "<h1 class='head'>头部区域</h1>",
};
var leftBox = {
template: "<h1 class='left'>侧边栏区域</h1>",
};
var mainBox = {
template: "<h1 calss='main'>主题区域</h1>",
};
const router = new VueRouter({
//这里构造函数里传递的是一个{}包含的对象，对象里面自然就包含很多可以配置的属性
routes: [
{
path: "/",
components: {
//这里component用模板对象来配置。
default: header, //组件名：组件
left: leftBox,
main: mainBox,
},
},
],
});
new Vue({
el: "#app",
router,
});
</script>
</body>
</html>
- 山地人第四节，编程式导航。目前感觉没啥用。不过让我对模板对象的理解加深了。
const Home = {
//有个疑问，模板对象为什么可以设置方法？ //em。。。当然可以，数据和行为组成对象。template就是数据。
methods: {
// // 在浏览器记录中前进一步，等同于 history.forward()
// router.go(1)
// // 后退一步记录，等同于 history.back()
// router.go(-1)
// // 前进 3 步记录
// router.go(3)
// // 如果 history 记录不够用，那就默默地失败呗
// router.go(-100)
// router.go(100)
//就到这里吧，感觉有点偏，下一节。
goToShopcart() {
this.$router.push("shopcart"); //
},
goToSetting() {
this.$router.push({
path: "setting/888",
});
},
},
template: `<div>
<h1>Home</h1>
<button @click="goToShopcart">
购物车
</button>
<button @click="goToSetting">
设置页
</button>
</div>`,
};
- 命名路由（山地人Lesson05）
没啥好讲的，很好懂，在李子献的视频里也已经用过了。直接上官方文档吧
注意到，js里的对象非常灵活，多多体会吧。给to属性传递一个对象，该对象包含一个name属性，name属性若与route对象里的name属性匹配，两者绑定。其中，params属性里包含的对象，可以给path传参。
- 命名视图，重定向 已经在up主李子献的视频里了解并做了笔记。这部分的文档就先跳过吧。
- 别名。
注意最后一句话，相当于 函数 变成了 多对一的映射，即，多个不同的path，对应了某个（些）相同的组件。应该会很有用。
创建组件的方式
- 先介绍两种大同小异的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<!-- 如果要使用组件，直接把组件的名称，以html的形式，引入到页面中，如下 -->
<my-com1></my-com1>
<!-- 取消驼峰，加入'-' ，若名称是小写，则不用变动。-->
</div>
</body>
</html>//1.1使用Vue.extend来创建全局的vue组件
var com1 = Vue.extend({
//参数是一个配置对象
template: "<h3>这是使用vue.extend创建的组件</h3>", //通过template属性，指定了组件要展示的html结构
});
//1.2使用vue.component('组件的名称'，创建出来的组件模板对象)
Vue.component("myCom1", com1); //将组件模板对象，注册为一个真正的具有名称的组件，使得将来在页面中，可以引用这个组件
// //1.3将上面两步合并简写。
// Vue.component(
// "myCom1",
// Vue.extend({
// template: "<h3>这是使用vue.extend创建的组件</h3>",
// })
// );
//2 将1.3进一步简化。
Vue.component(myCom2, {
template: "<h3>这是使用vue.componnet创建的组件</h3>",
});
//不论用那种房市场创建的组件，组件的template属性指向的模板内容，必须有且只能有位移的一个根元素。如<h1></h1> <p1></p1> 就是错误的，应该用一个div作为根元素包含起来
var vm = new Vue({
el: "#app",
});上述两种方法，在创建模板时 ，html结构都被引用在了“ ”引号内，没有编辑器的提示。在创建比较大的组件时，很不方便且容易出错。可以参考下面这种方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<mycom3></mycom3>
</div>
<!-- 在被vue控制的#app外面，使用template元素,定义组件的html模板结构 -->
<template id="tmp1">
<div>
<h1>
这是通过template元素，在外部定义的组件结构，这个方式，有代码的只能提示和高亮
</h1>
<h2>好用！！</h2>
</div>
</template>
<script>
Vue.component("mycom3", {
//第一个参数是组件名称，打引号
template: "#tmp1",
});
var vm = new Vue({
el: "#app",
});
</script>
</body>
</html>
上面的几种方法，定义出来的都是全局组件。在不同的vue model中都能使用（前提是vue已经注册）
下面给出私有组件的定义方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app1">
<login></login>
</div>
<div id="app2">
<!-- 这里，就用不了名为login的组件了 -->
</div>
<script>
var vm1 = new Vue({
el: "#app1",
components: {
login: {
//组件名称
template: "<h1>私有的组件</h1>", //同上面的方法，也可以在外部用template标签定义模板并指定id，然后在这里通过id引用。
},
},
});
</script>
</body>
</html>
7554
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
