vue中的路由Router

1.在脚手架项目中下载路由：cnpm/npm i vue-router --save-dev 项目中布局
cnpm/npm i vue-router -g 全局下载
2.使用：
2-1 引入： import Router from ‘vue-router’
2-2 使用: Vue.use(Router)
2-3 配置：
全局路由：
主入口路由：

2-4：注册：

3.导航守卫：
3-1 路由全局守卫：
router.beforeEach(to,from,next)=>{
if(to.path == ‘login’){
next()
}else{
alert("还没登录，请登录”)
}
}
3-2 路由独享守卫：

4.router和route的区别
4.1.router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。

举例：history对象

$router.push({path:‘home’});本质是向history栈中添加一个路由，在我们看来是 切换路由，但本质是在添加一个history记录

$router.replace({path:‘home’});//替换路由，没有历史记录

4.2.route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等

详情可见 https://www.cnblogs.com/czy960731/p/9288830.html

5.路由跳转方式：
5.1 <router-link to=‘需要跳转到的页面的路径‘> //浏览器在解析时，将它解析成一个类似于 的标签。
5.2 this.$router.push({ path:’/user’})

              this.$router.push({path: 'goodsDetails/',query:{productId: id}})    //  动态路由（可传递参数）
                this.$route.query.productId     //获取路由参数

6.router中params和query参数
6.1 用params，搭配路由是路由名字name，如同post请求，参数不会在路由中进行拼接：
this.$router.push({name: ‘goodsDetails’,params:{productId: id}})

6.2  用query，搭配路由是路由路径path，如同get请求，参数会在路由中进行拼接：
       this.$router.push({path: 'goodsDetails/',query:{productId: id}})    //  动态路由（可传递参数）