vue-router的基本使用

前言

高屋建瓴：站在一个高的地方看清这个东西的全貌 学习起来不会很迷茫 也可以很系统的去学习这个东西 掌握起来也比较扎实 

---

一、vue-router是什么？

可以把他看成一个可以进行组件路由的工具

二、如何使用vue-router

1.安装

在终端下输入命令  npm install vue-router --save

2.前期准备

我们要使用这个工具要准备几个组件到时候就是对这几个组件进行跳转

 在一个vue项目中我们通常把路由组件放在src文件夹下的pages文件夹内

在这里我们分别把这些组件放在不同名字的文件夹内取相同的名字index.vue这样在引入时路径只需要写到这个文件夹即可，因为会自动去找index文件进行引入

3.路由配置

        我们首先在src文件夹下建立一个名为router的文件夹里面放一个index.js的文件我们将在这个文件里面进行路由配置

 这个路由配置分三步

        1.初始化

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter);

        2.引入所需要配置的路由组件

import Home from '@/pages/Home'

import Search from '@/pages/Search'

import Login from '@/pages/Login'

import Register from '@/pages/Register'

  3.进行路由配置

export default new VueRouter({

  // 配置路由

  routes:[

    {

      path:'/home',

      component:Home

    },

    {

      path:'/search',

      component:Search

    },

    {

      path:'/login',

      component:Login

    },

    {

      path:'/register',

      component:Register

    },

    // 重定向  在项目跑起来的时候 立马访问首页

    {

      path:"*",

      redirect:'/home'

    }

  ]

})

这里面有两点  path是到时候路由的路径

component 就是我们引入的组件名称 和第二步中import 后面的名字一致即可

重定向不用理解一般都是默认 重定向首页路由也就是home组件

4.路由注册

我们配置完路由还需要对路由进行注册，注册完就可以使用了

注册就是在main.js文件下输入两行代码即可

 就是标记的这两处

5.路由的使用

我们注册完还需要在App这个根组件下进行显示

 只需要加入这一行代码即可

6.效果展示

 当我们在网址后面加上后缀/home即可在页面上展示Home组件内容

7.路由跳转的使用

        有两种方法可以实现路由跳转

                        1.声明式导航 router-link 可以进行路由的跳转

        我们在需要页面跳转的地方加上router-link即可 例如：

 

                        2.编程式导航push| replace 可以进行路由跳转

                                这个是利用点击事件函数回调方法进行的路由跳转：

 

---

总结

这就是今天的分享 第一次分享 作为一个刚刚接触前端的小菜鸟 不对的地方请大家指正 互相学习共同进步。