Vue_(Router路由)-vue-router路由的基本用法


  vue-router官网:传送门

  vue-router起步:传送门

  vue-router路由:Vue.js官网推出的路由管理器,方便的构建单页应用

  单页应用:Single Page Application简称SPA,只有一个web页面的应用,用户与应用交互时,动态更新该页面的内容

  简单的来说,根据不同的url与数据,将他们都显示在同一个页面中,就可以称为是单页应用

  而控制页面跳转需要用路由

  vue-router下载:下载js,或使用npm install vue-router -S

  vue-router使用:

    定义组件

    配置路由

    创建路由对象

    注入路由

  Learn

    一、-vue-router路由的基本用法

  目录结构

  【每个demo下方都存有html源码】

一、-vue-router路由的基本用法

   使用 router-link 组件来导航、通过传入 `to` 属性指定链接、 默认会被渲染成一个 `` 标签

    <body>
        <div id = "GaryId">
            
            <router-link to="/home">首页router-link>
            <router-link to="/foods">美食router-link>
            
            <div>
                
                  
                <router-view>router-view>
            div>
        div>
    body>

   分四步使用vue-router