Vue Router(路由)的基础介绍

什么是路由(what)?
根据不同的路径显示不同的页面(组件)。
vue router的入门

  1. 我们使用vue-cli脚手架可以生成 vue router,
    Vue Router(路由)的基础介绍
    如果你在你的vue项目里没有看到router,使用npm install vue-router进行安装。
  2. 我们在src下进入router打开index.js文件(就是上面的图片里的index.js)
  3. 开始配置:
    首先导入vue router:Vue Router(路由)的基础介绍
    引入vue组件:
    Vue Router(路由)的基础介绍
    还是这个页面,接着配置路由
    Vue Router(路由)的基础介绍
    在你要使用路由的页面上
    Vue Router(路由)的基础介绍
    最后vue项目跑起来,在页面上你就会看到这个:

Vue Router(路由)的基础介绍
这是一个比较简单的路由,下面我们开始深入路由。
还是在于之前配置路由的index.js文件下,
导入我们创建的模板和路径:
Vue Router(路由)的基础介绍
还是这个页面,配置路由
Vue Router(路由)的基础介绍
在我们要用的组件中引用:
ex;在hello.vue 下
Vue Router(路由)的基础介绍
最后我们在页面上就会看到:
Vue Router(路由)的基础介绍
vue router 的基本使用完成了,希望你看了之后自己动手打一遍,这样你才能真的掌握。