Vue路由 - 掘金

Hash模式

vue-router默认使用是Hash模式，Hash模式主要是通过url中的hash值来变化的。Hash（即#）是url的一个锚点，代表的是网页中的一个位置，当hash值变化时，浏览器就滚动到相应的位置，所以不会重新加载页面。在hash值变化的同时url会被浏览器记录下来，这样既可以使用浏览器的后退了。

总结：Hash模式就是通过改变url中#后面的值，实现浏览器渲染指定的组件

History模式

这种模式利用了HTML5 History新增的pushState()和replaceState()方法. 除了之前的back,forward,go方法,这两个新方法可以应用在浏览器历史记录的增加替换功能上.使用History模式,通过历史记录修改url,但它不会立即向后端发送请求. 注意点: 虽然History模式可以丢掉不美观的#,也可以正常的前进后退,但是刷新f5后,此时浏览器就会访问服务器,在没有后台支持的情况下,此时就会得到一个404!官方文档给出的描述是:"不过这种模式要玩好,还需要后台配置支持.因为我们的应用是单个客户端应用,如果后台没有正确的配置,当用户直接访问时,就会返回404.所以呢,你要在服务端增加一个覆盖所有情况的的候选资源;如果url匹配不到任何静态资源,则应该返回同一个index.html页面."\

history.pushState():跳转到页面，并且有记录
history.replaceState():跳转页面，没有记录
history.go():后退几步或者前进几步
history.back():移除当前页面，返回上一个页面 history相当于一个栈结构每次pushState就相当一次入栈，每次back就相当一次出栈

总结:History模式就是pushState()方法来对浏览器记录进行修改从而进行修改

路由的配置实例 router.js文件

//第一步：引入必要文件
import Vue from 'vue'
import VueRouter from 'vue-router'
//引入是路由需要的组件
import Home from '../views/Home.vue'

//第二步:加载全局组件Router
Vue.use(VueRouter)

//第三步:配置路由实例
const router = new VueRouter({
  //设置路由模式：默认是hash，在框架中改为history，配合后端使用
  mode: 'history',
  //基路径:默认值为'/'.如果整个单页应用在/app/下,base就应该设为'/app/'.一般可以写成__dirname,在webpack中配置.
  base: process.env.BASE_URL,
  //注册路由
  routes
})

const routes = [
  {
    //路由的地址
    path: '/',
    //给路由命名，name必须是唯一的
    name: 'Home',
    //需要显示的组件（这里是因为上面引入过了，应该写路径）
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  },
  {
    path: '/home',
    name: 'Home',
    component: () => import('../views/Home.vue')
  }
]

//第四步：将配置的路由实例抛出
export default router

将router.js文件挂载到vue实例中（main.js中）

router,routes,route的意思

1.router:代表路由实例，如$router 2.routers:指router路由实例的routes API.用来配置多个route路由对象. 3.route:代表自身组件的路由对象，如$route

页面标签

1.router-link组件点击跳转到对应的页面 2.router-view组件，路由的出口（可以做路由嵌套）

  <div class="home">
  
     //router-link:跳转标签
     // to：跳转的地址
    <router-link to="/about">111</router-link>
    
    //路由匹配到的组件全部渲染到这里
    <router-view></router-view>
    
  </div>

JavaScript跳转

1.this.$router.push(),有页面的记录

 methods: {
    toHome() {
    
      //单纯跳转
      this.$router.push("/home");
      
      //使用path跳转  query传参
      this.$router.push({path:"地址",query:参数})
      
      //使用name跳转  params传参
      this.$router.push({path:"地址",params:参数})
     
    },
 }

  created() {
    // 用path跳转 使用this.$route.query获取
    console.log(this.$route.query);
  
    // 用name跳转 使用this.$route.params获取
    console.log(this.$route.params);
  },

2.this.$router.replace(),没有页面的记录(其余的和this.$router.push一样)
3.this.$router.go()这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。

    //前进2步
    this.$router.go(2);
    
    //后退2步
    this.$router.go(-2);
    
    // 如果 history 记录不够用，不会跳转
    router.go(-100)
    router.go(100)

嵌套路由

routes: [
    //嵌套路由就写在children配置中,写法和routes一样.
   { path: '/user', 
    component: User,name:'user', 
    //children:[{}] 也可以继续添加children嵌套 
    children: [
        //如果/user下没有匹配到其他子路由时,User的<router-view>是什么都不会显示的,如果你想让它显示点什么.可以将path:''.设为空.此时UserDefault就是默认显示的组件.
        { path: '', component: UserDefault ,name:'default', }, 
        //此时path等同于'/user/foo',子路由会继承父路由的路径.但是不能写成path:'/foo'.因为以 / 开头的嵌套路径会被当作根路径,也就是说此时foo成了根路径.而不是user. 
        { path: 'foo', component: UserFoo,name:'foo'}, 
        { path: 'bar', component: UserBar,name:'bar' } 
      ] 
   } 
]

重定向

routes:[ 
    {
        path:'/a',
        //从 /a 重定向到 /b 
        redirect:'/b'
    } 
]  /
//从 /a 重定向到 命名为'foo'的路由 
routes: [ { path: '/a', redirect: { name: 'foo' }} ]

路由守卫

to: Route: 即将要进入的目标路由对象
from: Route: 当前导航正要离开的路由对象
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
- next() : 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
- next(false) : 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
- next('/') 或者 next({ path: '/' }) : 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
- next(error) : (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

//1,可以在main.js 或者在单独的路由配置文件router.js中进行设置
router.beforeEach((to, from, next) => { 

      next();
    });
	
//2,也可以在组件内部设置
	this.$router.beforeEach((to, from, next) => { 

      next();
    });