Vue2.0--->路由（1）

路由之间是怎么跳转的，有哪些方式

   1.<router-link to='需要跳转到页面的路径'>
   2.this.$router.push()跳转到指定的url,并在history中添加记录，点击回退返回到上一个页面
   3.this.$router.replace()跳转到指定的url，但是history中不会添加记录,点击回退到上上个页面
   4.this.$touter.go(n)向前或者后跳转n个页面,n可以是整数，也可以是负数

vue-router怎么配置路由

在vue配置路由分为5个步骤
1.引入vue-router.js
2.配置路由path和组件,和生成路由对象
3.把路由对象配置到new Vue中router选项下
4.页面使用<router-view><router-view>承载路由
5.<router-link to'要跳转的路径'></router-link>设置路由导航(声明式导航方式/编程式跳转)

vue-router的钩子函数都有哪些

关于vue-router中的钩子函数主要分为3类
全局钩子函数要包含beforeEach
beforEach函数有三个参数，分别是：
1.to:router即将今日的路由对象
2.from:当前导航即将离开的路由
3.next:function,进行管道中的一个钩子，如果执行完了，则导航的状态就是confirmed（确认的）,否则为false终止导航.
//
组件内的钩子
1.beforeRouterEnter
//项目需要在进入某个页面前，判断从特定页面进来时，做某些处理。例如：只有从详情页回到列表页需要重新调接口。此时，用到了beforeRouteEnter方法
beforeRouteEnter (to, from, next) {
next(vm => {
  // 通过 `vm` 访问组件实例
 vm.deleteScan();
})
}


2.beforeRouterUpdate,
beforeRouteUpdate (to, from, next) { // 在当前路由改变，但是该组件被复用时调用 // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候， // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 // 可以访问组件实例 `this` },


3.beforeRouterLeave

路由传值的方式有哪几种

Vue-router传参可以分为两大类，分别是编程式导航($router.push())和声明式导航

1.router.push  编程式导航
字符串：直接传递路由地址，但是不能传递参数
this.$router.push('home)

对象:命名路由，这种方式传递参数，目标页面刷新会报错-->name+params
this.$router.push({name:'news',params:{userld:123}})

查询参数和path配对的是query
this.$router.push({path:'/news',query:{userld:123}})
接收参数：this.$router.query

2.声明式导航
字符串<router-link to:'news'></router-link>

命名路由<router-link :to:'{name:'news',params:{userld:111}}'>

还可以to='/path/值',需要提前在路由规则里设置path:'key'

查询参数<router-link :to='{path:'/news',query:{userld:111}}'></router-link>

还可以to='/path?key=value'

怎么定义vue-router的动态路由，怎么获取传过来的动态参数

动态路由指的就是path路径上传值，前提需要路由规则设置/path/:key名，可以写对各用/隔开，获取使用$router.params.key名来提取对应路径传过来的值

Vue的路由实现模式:hash模式和history模式

hash模式:在地址栏中符号#，#以及#后面的字符称之为hash，用window.location.hash读取。
特点：hash虽然在URL中，但不被包括在HTTP请求中，用来知道浏览器的动作,对服务端安全无用,hash不会重加载页面
//
history模式:history采用HTML5的新特性，且提供了两个新方法:pushState(),replaceState()，可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更

路由配置项常用的属性及作用

路由配置参数
1.path:跳转路径
2.component：路径相对于的组件
3.name:命名路由
4.childen:子路由的配置参数(路由嵌套)
5.props:路由解耦
6.redirect:重定向路由

编程时导航使用的方法以及常用的方法

1.路由跳转：this.$router.push()
2.路由替换:thsi.$router.replace()
3.后退:this.$router.back()
4.前进：this.$router.forward()

Vue中如何去除URL中的 “#”

vue-router默认使用hash模式,所以在路由加载的时候，项目中的URL会自带‘#’。
如果不想使用"#",可以使用vue-router的另一种模式history:
new Rputer({
  mode:'history',
  router:[]
    })
    
    需要注意的式，当我们启用history模式的时候,由于我们的项目式一个单页面应用，所以在路由跳转的时候，就会出现访问不到静态资源而出现404的情况
    这时候就需要服务端增加一个覆盖所有情况的候选资源
    如果URL匹配不到任何静态资源，则应该返回同一个'index.html'页面

$route和$router的区别

1.$route式路由信息对象，包括path,hash,query,fullPath,matched,name等路由信息参数
2.$router式路由实例对象,包括了路由的跳转方法，实例对象等