9-vue-router路由
一、vue的安装和使用路由
路由是以插件的形式引入到我们的vue项目中来的。
vue-router 路由插件 是vue的核心插件
1.下载
cnpm install vue-router -S
或
cnpm i vue-router -S
如果你要在项目 使用 vue-router路由插件？大前提： 你一定要 引入vuejs，然后再移入你的路由插件vue-router.
2.使用路由插件Vue.use(VueRouter)
Vue.use(VueRouter)
不能少,因为在一个模块化工程中使用router，
必须要通过Vue.use()明确地安装路由功能
3.创建路由对象var router = new VueRouter()
4.配置路由规则 router.addRoutes([路由对象])
路由对象{
path:'锚点值',
component:你要显示的组件
}
例如：
{path:'/goods', component: Goods},
5.将配置好的路由对象交给Vue（顶层组件）
在options中传递->key叫做router
new Vue({
el: '#app',
router ,
render: h => h(App)
})
6.留坑(使用组件)<router-view></router-view>
router-view 这个是vue自带的内置组件，它的作用是：将我们配置好的路由规则，放到组件上。
二、路由的跳转
路由的跳转方式有2种：
(1)
通过标签：`<router-link to='/login'></router-link>`
例如：
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-link to="/user">我的</router-link>
<router-view></router-view>
注意：
在视图层中，使用路由：<router-link to="/goods">商品</router-link>
这里用to指向路径表现层， to不能少！！！
<router-link to="/login">登录</router-link>
router-link 这个是vue自带的“内置组件”，它的作用是：路由跳转。（和超链接的作用差不多。）
(2)
通过js控制跳转`this.$router.push({path:'/login'})`
区别：
this.$router.push() 跳转到指定的url，会向history插入新记录
this.$router.replace() 同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。
this.$router.go(-1) 常用来做返回，读history里面的记录后退一个
vue-router中的对象：
$route 路由信息对象,只读对象
$router 路由操作对象,只写对象
三、路由的传参和取参
路由的传参和取参
1.在router-link标签里 去配参，然后我们在 路由跳转到的 那个组件中 去访问 这些参数---------------------------------------------
查询参
在视图层设置：
配置（传参） :to="{name:'login',query:{uid:'001'}}"
在组件中去访问参数：
获取（取参） ---获取 传递过来的参数
this.$route.query.uid
例如：
(1).在视图层设置---配置（传参）：
<router-link :to="{name:'login', query:{uid:'001',uname:'张三',pwd:'123456'}}">登录</router-link>
(2).在组件中设置---获取（取参）：
// 子实例（子组件）
var Login = {
template:'#login',
data:function(){
return {
uid:'',
uname:'',
pwd:''
}
},
// 生命周期
created:function(){
// $route 路由信息对象,只读对象
console.log(this.$route);
this.uid = this.$route.query.uid;
this.uname = this.$route.query.uname;
this.pwd = this.$route.query.pwd;
}
}
2.在路由配置中 去给 相关组件 配参，然后我们在 路由跳转到的 那个组件中 去访问 这些参数---------------------------------------------
结合 router-link 一起使用
<router-link to="/register/110">注册</router-link>
你给具体参数，赋的是 是什么，要在 to属性里 写清楚！！
在组件中去访问参数：
获取（取参） ---获取 传递过来的参数
this.$route.params
(1).在路由中设置---配置--参数名称：
{
path:'/register/:wcid',
name:'register',
component:Register
},
(2).在视图层设置---配置--给参数，赋的是 是什么，要在 to属性里 写清楚！！：
<router-link to="/register/110">注册</router-link>
(3).在组件中设置---获取（取参）：
created:function(){
console.log(this.$route);
console.log(this.$route.params.wcid);
this.rid = this.$route.params.wcid;
}
3.常用搭配：path--query name---params ---------------------------------------------
<router-link :to="{path:'index',query:{color:'red'}}" />
<router-link :to="{name:'index',params:{color:'red'}}" />
:to传参的属性里 query和name或path都可以 params是和name配对的
4.路由跳转传参---，其中"标签跳转传参" 和 "js跳转传参" ，不同步的问题----------------------------
路由跳转传参---，其中"标签跳转传参" 和 "js跳转传参"，不同步的问题，解决方法：
<router-view></router-view>
在视图层 添加 :key="$route.fullPath"，设置如下
<router-view :key="$route.fullPath"></router-view>
注意：
不同步：指定是 数据 不能 传递到 组件上,(或者数据 组件 接收不到 传递过来的数据！！)
测试 连接 多次点击 按钮，通过js跳转传参，出现如下错误
解决办法：
在vue实例 上面，添加：
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}5.嵌套路由（有叫 嵌套子路由）---------------------------------------------------------
嵌套路由（有叫 嵌套子路由）
嵌套路由--- 通常由多层嵌套的组件组合而成。
1:router-view的细分
router-view第一层中，包含一个router-view
2:每一个坑挖好了，要对应单独的组件
路由配置
routes: [
{
path:'/menu',
name:'menu',
component:menu,
//路由嵌套增加此属性
children:[
//在这里配置嵌套的子路由
{},
{},
{}
]
}
]
进入首页下面会有主导航，首页、新闻中心、客户案例，关于我们
新闻中心 下面 有 二级导航
（1）先在 路由对象中的写好 我们的 嵌套路由（子路由）children:[]
// 配置路由对象
routes:[
{
path:'/index',
name:'index',
component:Index
},
{
path:'/news',
name:'news',
component:News,
// 嵌套路由（子路由）
children:[
{
path:'/news/one',
name:'news.one',
component:One
},
{
path:'/news/two',
name:'news.two',
component:Two
}
]
},
（2）到组件中的模板（视图层）中，通过标签跳转，进行设置
在视图层，下面四种方式，均可以访问到 嵌套路由下对应的组件！！！
视图层
<router-link to="/news/one">行业新闻</router-link>
<router-link to="/news/two">南讯新闻</router-link>
<router-view></router-view>
或
<router-link :to="{name:'news.one',path:'/news/one'}">行业新闻</router-link>
<router-link :to="{name:'news.two',path:'/news.two'}">南讯新闻</router-link>
<router-view></router-view>
或
<router-link :to="{name:'news.one'}">行业新闻</router-link>
<router-link :to="{name:'news.two'}">南讯新闻</router-link>
<router-view></router-view>
或
<router-link :to="{path:'/news/one'}">行业新闻</router-link>
<router-link :to="{path:'/news/two'}">南讯新闻</router-link>
<router-view></router-view>
