Vue小白必看！VueRouter搭建攻略，带你玩转路由导航

你知道Vue吗？里面有个叫VueRouter的东东特别重要，它就是搞定我们应用里路径的那货。今天咱们就来说说这到底是个啥，怎么搭建，规则是啥，动态参数怎么用，编程导航还有哪些功能，还有那个导航守护是啥意思。希望大家看完后能更好地理解和使用这个东西

安装VueRouter

很简单，只要安装个波Vue路由器，然后用npm或者yarn这两个小助手快速搞定。装好了之后，毫不费力的把它导入到你的项目中，接下来就能畅快淋漓地玩耍Vue了！

说白了，Vue里的路由就像是咱们网站的导游，能快速找到你想看的页面，告诉它每一个网址要显示什么组件。这么一来，别人点链接时，VueRouter就能立马知道该上哪儿找相应的组件

$ npm install vue-router

基本结构

装个VueRouter，一秒让新路由清晰明了，简直牛逼得不要不要的！这货就好比一张地图，告诉你每个点在哪儿（路径），都有些啥玩意儿（组件）。这下子，你对整个App的布局就一清二楚~

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

使用router-view组件

记住网页是用Vue搞的，加个’traffic-router-view’就好使了，那个玩意儿是用来展示路由信息的。你上网的时候，Vue会根据你输的网址，用路由规则找相应的组件，然后直接塞到’traffic-router-view’里给你看。

换个网站就能搞定，速度快了好多！换网页也超简单的～

动态参数

遇到要从路由器拉动态数据别慌Vue来帮你搞定！只需给路由规则加点动态参数，像这样’s/:id’这么简单就行了。接着在组件里，用’this.$route.params.id’这个神奇的公式，轻松拿到你想要的数字!

  

    

      Home
      About
    
    
  

搞定个动态参数，你就能随时随地传数据！想咋看就咋看，VueRouter就是这么牛逼！你有什么问题，它都能帮你解决！

编程式导航

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/blog/:id',
      name: 'blog',
      component: Blog
    }
  ]
})

别老傻傻地换页点链接！VueRouter有两大神器——$router.push()和$router.replace()，让你的网页切换像开飞机一样顺溜。

按一下那个按钮，就可以直接跳到另一页！接着，用$router.push()这个方法，就能轻松切换页面了。实在是太方便了，不管在哪儿都能让你觉得顺滑得不得了~

export default {
  data () {
    return {
      postId: null
    }
  },
  created () {
    this.postId = this.$route.params.id
    // 根据post id获取文章
  }
}

NavigationGuards

换路由器真是挺头疼的，得考虑用户权限够不够，新页面插入前后的问题等等。不用怕，VueRouter的导航保护功能就是你的救星！

导航守护就是你的得力助手，帮你轻松搞定网页难题。全球守护不仅如此，还能在手机APP里帮你处理琐碎事，无论你身处何地都能随时找它帮忙。而组件守护？这是专为特定组件准备的特别功能，只有当你进入或退出该组件时才会触发！

总结与展望

  

    

      Home
      About
    
    
  

看完这篇文章后，你就能知道VueRouter有多牛了！事实上，这玩意儿对于Vue开发来说非常关键！我已经把安装方法和基础结构都告诉你。还有更高级的操作，比如动态参数和导航控制也没落下。当然，我还教你怎么防止别人乱动你的路由。简单好用，功能强大，真是让人爱不释手！

别纠结，新手小白也可以轻松上手SPA，学学VueRouter就行了。无论项目多么混乱，需求怎么变化无常，有了它，你就能轻松应对，牛气冲天！

问问你们，觉得VueRouter咋样？有人用过么？有啥小毛病跟大家说说呀~