vue router路由基本使用_import router from '@router

vue-router简单介绍

在学习Vue中，vue-router是必须掌握的，它是vue的路由管理器，简单来说根据不同的 url 地址展示不同的内容和页面。能够实现单页面应用(SPA):更新视图而不重新请求页面。

路由有两种工作模式：

1.Hash模式：

hash（#）是URL 的锚点，也就是url中#及其以后的值，通过改变#后面的值，跳转到相对应的位置，但不会刷新页面，因为在HTTP请求中不会包括#及其以后的值，特点是URL地址中永远带着#号，兼容性比History模式好。

2.History模式：

HTML5 History API提供了一种功能，能让开发人员在不刷新整个页面的情况下修改站点的URL，就是利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。特点是URL地址中不带#号，比较符合规范，但兼容性较不好，在部署上线时，刷新页面会显示404错误，那么就需要后端来做相对应的配置。

vue-router的安装与引用

第一步使用npm安装：

npm i vue-router

第二步在项目文件中使用：

本着模块开发思想，我们首先在src文件下新建router文件夹,在里面进行配置引用

 在index.js文件中导入路由，创建路由实例，并且传入路由映射配置

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter)
import Login from '@/pages/Login'
import Register from '@/pages/Register'
import Message from '@/pages/Message'
import Home from '@/pages/Home'
export default new VueRouter({
  routes: [{
    path: '/home',
    component: Home,
    meta: { show: true }
  },
  {
    path: '/login',
    component: Login,
    meta: { show: false }
  },
  {
    path: '/search/:keyword',
    component: () => import('@/pages/Search'),
    meta: { show: true }
  },
  {
    path: '/register',
    component: Register,
    meta: { show: false }
  },
  {
    name: 'user2',
    path: '/user',
    component: User2,
    children: [{
      name: 'message',
      path: 'message',
      component: Message,
      meta: { isAuth: true, title: '消息' },
      props($router) {
        return { id: $router.query.id, name: $router.query.name }
      }
    }]
  }
  {
    path: '*',
    redirect: '/home'
  },
  ]
})

第三步在Vue实例中挂载创建的路由实例

import Vue from 'vue'
import App from './App.vue'
import router from '@/router'
Vue.config.productionTip = false
 
new Vue({
  render: h => h(App),
  router
}).$mount('#app')

第四步在页面中使用

   <router-link to="/login">登录</router-link>
   //其中to()里面是router配置文件对应的path值

  <router-view></router-view>
  //这里是路由组件显示的位置