说明：
此文章是上一篇文章的延续：
- 注意 router-link 中 to 对应的值得写法的异同
宫保鸡丁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.6.10.js"></script>
<!-- 这里引入的路由要依赖在vue下；所以应该加载在 vue 后面
当我们安装（引用）了这个路由后；这个时候 我们的html就有了一个路由的构造函数(通过new 构造)的使用了：
var router = new VueRouter()
-->
<script src="./lib/vue-router.js"></script>
</head>
<body>
<!-- 第一种 路由传参
步骤：
1:定义 一个基础组件：只包含 templater
2:构造一个路由：var rouObj = new VueRouter({ })
3:在Vue种注册这个这个路由：和 方法 methods 同级 ，router:rouObj (router是固定的写法：关键词 ，rouObj就是我们定义的路由)
4:在路由 rouObj 中添加 路由规则：就是routes (注意⚠️这里和Vue中的关键词router不是同一个单词) 其中：path 对应 URL中的指向 地址（Hash） ,component:指的是 对应的组件的 名称 和 步骤1 对应 ️
5：在 Vue 的 div种 添加 路由的容器：<router-view>
6:在 Vue的div中通过 <router-link> 通过 属性：to 指定对应步骤4 的path部分；；
上面的就是使用的步骤：没用参数的传递；只是组件的调用
第一中方式：传递参数：query
7:在 步骤 6 中的 to中对 指向 通过 ？ 拼接参数的 键值对 : （如：to="/login?id=11"）通过 ？ 链接 这个时候健是：id ；值：11
8:在 路由（也即是步骤 2 中 ） 的 created的初始化函数中 通过：this.$route.query.参数的健 ； （也就是：this.$route.query.id）
第二中方式：传递参数：params
9: 首先在 路由 rouObj（步骤2中） 的routes 路由规则中的path 的指向的地址后面添加 参数：
如这是初始化的定义： { path: '/login', component: denglu1 } 在path 添加两个参数：id ;name 后
{ path: '/login/:id/:name', component: denglu1 } //这里的id 和 name 是参数元素；其中通过链接的冒号(:)是一个占位符
那么在 Vue的div中的 对规则使用的 <router-link> 中 通过在
初始化：<router-link to="/login ">点击登陆</router-link>
的基础上添加传递的参数：
<router-link to="/login/12/'旺旺' ">点击登陆</router-link>
其是通过斜横 / 进行参数的拼接
10:和 8 的步骤位置一样 只是其是通过 this.$route.params.参数的健 添加的 ；（如：this.$route.params.name）
总结： 多观察 网页中的 --》 检查 --》 通过 在控制台输入：vm 观察其中属性携带的参数 这样理解更清晰
-->
<div id="app">
<!-- router-link 代替上面的 a 标签在使用组件的时候添加了 # 的使用方式；router-link 不需要添加 # -->
<!-- router-link 中的 to 属性：指定的是链接到的是哪一个 组件的使用 ；
router-link 默认的 tag 是使用的 a 标签
我们可以通过 设置 tag 来改变其使用的 标签
-->
<!-- 在 to指定 的路径后面添加参数 ；并在组件中使用 -->
<!-- 总结： 多在网页中通过 检查 后在控制台 输入 vm 观察其中的参数 -->
<!-- 通过 在控制台 的 route查看数据发现：其中 属性：params中含有这些参数 ，因此在获取的时候也可以通过 params 获取 -->
<router-link to="/login/10/'旺旺'/123 ">登陆</router-link>
<!-- ?上面的在 /login 后面添加的 参数：组件中路由 中的routes路由规则path中的id;对应 login后面的第一个参数id（表示一个参数）：10 ； name 和 paw 依次是第二个和第三个的参数-->
<router-link to="/register?id=66" tag="span">注册</router-link>
<!-- 这里的 router-view 标签是Router提供的；可以看作是一个占位符； 将来 路由规则将匹配到的组件 展示到这个 router-view 容器中 -->
<router-view></router-view>
</div>
<script>
var denglu1 = {
template: '<h3>登陆---{{msg}}---{{$route.params.id}}---{{$route.params.name}}</h3>',
data() {
return {
msg: '我是组件中的信息～～～'
}
},
created() {//组件生命周期中的钩子函数（可以参考Vue的周期函数）
//this:代表当前组件；在 template中可以使用的话；可以省略
// 总结： 多在网页中通过 检查 后在控制台 输入 vm 观察其中的参数
//第二种方式获取 组件中传递的参数
//通过 对网页 检查 后在控制台观察 vm 中的参数 属性 发现 route中的 params中含有这三个参数，所以也可以通过params获取其传递的参数
alert(this.$route.params.name)
}
}
var zhuche1 = {
template: '<h3>注册组件---{{ this.$route.query.id }}</h3>',
created() {
//复习： router的第一种方式获取 参数 query
alert(this.$route.query.id)
}
}
var rouObj = new VueRouter({
//route:这个配置对象中的 route 表示 【路由匹配规则】 的意思
routes: [
//路由匹配规则：
//属性1:path:表示要监听的这个链接地址；如下面?登陆的说明；
//在使用 redirect重定向的时候 ；就是默认加载path对应的 默认的规则是redirect中的使用规则
//那么?下面{path:'/',redirect:'/login'} 意思就是：当这个网页中没有路由对应的要指向的规则的时候 ；默认使用的是 login 的规则；；（paht中表示为空；表示没有使用的定义规则）
{ path: '/', redirect: '/login' },// 使用 redirect:是重定向；；
// 属性1:path：表示 要监听的这个链接地址：如 该text.html在网页中打开的链接是： xxx/test.html ;
//那么当使用path这个规则地址后其访问的地址就是：xxx/test.html#/login
{ path: '/login/:id/:name/:paw', component: denglu1 }, // 总结： 多在网页中通过 检查 后在控制台 输入 vm 观察其中的参数
//上面?的 path中有三个参数（可以没有参数也可以有多个参数；）：其中拼接的冒号（:） 是一个占位符 ； (这三个参数在 标签<router-link>中定义的 )
// 如：本网页对应的 没有参数的地址是：text.html ;那么在添加了三个参数后：地址应该类似(test.html#/login/10(对应的id)/ls（对应的name）/123(对应的 paw))：test.html#/login/10/ls6/123
{ path: '/register', component: zhuche1 }
]
})
var vm = new Vue({
el: '#app',
data: {},
methods: {
},
router: rouObj // 注册路由：将路由规则注册对象；注册到vm实例上；用来监听Url地址的改变；然后通过容器<router-view>展示
})
</script>
</body>
</html>
上图
![vue项目：npm打包-S和-D区别：[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)