美文网首页
Vue路由的介绍(一)--路由基础入门

Vue路由的介绍(一)--路由基础入门

作者: 汉堡大痴 | 来源:发表于2018-07-30 14:07 被阅读0次

一,Vue路由,vue-router的介绍

vue-router的官网:https://router.vuejs.org/

vue路由:简单的说就是动态的从根里面挂载不同的组件,而不用手动挂载组件。

二,如果在安装vue-cli脚手架时,没有选择安装vue-router,以下是安装方法:

1,npm  install vue-router  --save /  cnpm install vue-router --save  进行安装

2,在main.js入口文件下,导入并引用

3,配置路由信息 

      ---->创建组件,并引入---->定义路由---->实例化---->挂载

4,在根组件里放入<router-view></router-view>

该句的意思是:组件模板里放入路由的入口,所有的路由都在此处显示

5,路由的跳转<router-link></router-link>

三,如果在安装脚手架时就已经安装了路由(即路由的模块化),那配置就简单多了,省略了上面1,2,3,4的步骤。在router的index.js直接配置:

相关文章

  • Vue路由的介绍(一)--路由基础入门

    一,Vue路由,vue-router的介绍 vue-router的官网:https://router.vuejs....

  • Vue路由

    一、Vue路由基础用法: 二、Vue路由配置的抽出 三、路由动态传值: 四、路由的跳转方式: 五、路由的hash模...

  • Vue-基础-05-重点

    Vue-基础-day05-重点 01-基础-路由-vue-router-嵌套路由 children用法和route...

  • vue子路由

    前言:上次简单介绍了vue-router,并且创建了两个路由,如果还没学过路由基础知识请点这里 子路由:比如有一个...

  • Vue_Router底层封装

    Vue_Router底层封装 关于Vue中的路由,做了底层的哈希路由的封装。基础路由相对容易,其中不足之处,慢慢再...

  • 【网络工程师配置篇】——华为RIP路由基础配置!

    RIP路由基础配置 一、RIP路由功能介绍 RIP...

  • Vue-Router

    Vue-Router路由 1路由基础 创建一个路由对象数组,每个对象分别有,path,component等属性,在...

  • Vue应用

    Vue项目 Vue结构 Vue项目打包与发布 Vue语法二 Vue网络请求 Vue路由 动态路由 编程式路由导航

  • CreateReactApp+ReactRouter4的使用

    路由基础介绍1,什么是前端路由? 路由是根据不同的 url 地址展示不同的内容或页面 前端路由就是把不同路由对应不...

  • Vue.js 路由

    本章节我们将为大家介绍 Vue.js 路由。 Vue.js 路由允许我们通过不同的 URL 访问不同的内容。 通过...

网友评论

      本文标题:Vue路由的介绍(一)--路由基础入门

      本文链接:https://www.haomeiwen.com/subject/qooxvftx.html