一文掌握vue-router的安装与使用

本篇文章给大家带来了关于vue的相关知识，其中主要介绍了关于vue-router安装和使用的相关知识，下面一起来看一下，希望对大家有帮助。

【相关推荐：javascript视频教程、vue.js教程】

vue-router的安装与使用

一、安装

步骤1：安装vue-router

npm install vue-router --save

步骤2：在模块化工程中使用它（因为是一个插件，所以可以通过Vue.use（）来安装路由功能）

立即学习“前端免费学习笔记（深入）”；

1. 导入路由对象，并调用Vue.use(VueRouter)

2. 创建路由实例，并传入路由映射配置

3. 在Vue实例中挂载创建的路由实例

二、使用

创建的router的配置文件在src下的router文件夹下的index.js文件中

index.js中内容如下：

冰舟分类信息系统

冰舟分类信息系统说明:本次更新修改了部分错误，增加了自定义标签管理，这个版本后所有页面均可调用一个标签，大大的提升了效率使用前请先 运行 install.asp 文件进行安装程序！！安装时请填写好 ACCESS文件目录以及ACCESS文件名，请确保填写的信息与FTP上的完全吻合，否则会出错！！安装玩后请，务必删除 install.asp 文件！ 本2.1版本含有强大的模板编辑功能，且初始模板均为D

下载

注：虽然在这里已经注册了router，但是其需要被挂在在vue上，才能起作用。

挂载方法：

在src文件下的main.js中引入router，并挂载在vue实例上。

//main.js
import Vue from 'vue'
import App from './App'
import router from './router'


Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

实际使用案例：

App.vue中关键配置如下：

Router的index.js文件如下：

// 配置路由信息
import Vue from 'vue'
import VueRouter from 'vue-router'
// import Home from '../components/Home'
// import About from '../components/About'
// import User from '../components/User'

// 懒加载,提高效率（因为app.js文件中集成了所有的业务代码，因此请求事件可能较长
// 通过将app.js分隔，在需要使用某些js代码的时候，才接收其代码）
const Home = () => import('../components/Home')
const HomeNews = () => import('../components/HomeNews')
const HomeMessage = () => import('../components/HomeMessage')

const About = () => import('../components/About')
const User = () => import('../components/User')
const Profile = () => import('../components/Profile')



// 1.通过Vue.use(插件)，安装插件
Vue.use(VueRouter)

// 2.创建VueRouter对象
const routes = [
  {
    path: '',
    //  component: Home
    // 重定向redirect
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home,
    meta: { title: "首页" },
    children: [
      {
        path: '',
        redirect: 'news'
      },
      {
        path: 'news',
        //  注意这里是没有s的！！！
        component: HomeNews,

      },
      {
        path: 'message',
        component: HomeMessage
      },
    ]
  },
  {
    path: '/about',
    component: About,
    meta: { title: "关于" },
  },
  {
    path: '/user/:userId',
    component: User,
    meta: { title: "用户" },
  },
  {
    path: '/profile',
    component: Profile,
    meta: { title: "档案" },
  }
]
const router = new VueRouter({
  // 配置路由和组件间的映射关系
  routes,
  mode: 'history',
  linkActiveClass: 'active'
})

// 3.将router对象传入到Vue实例中
export default router

// 导航守卫 前置钩子
router.beforeEach((to, from, next) => {
  document.title = to.matched[0].meta.title
  console.log('+++');
  next()
})

// 导航守卫， 后置钩子 不需要调用next函数
router.afterEach((to,from) => {
  console.log('----');
})

main.js中的挂载：

import Vue from 'vue'
import App from './App'
import router from './router'


Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

【相关推荐：javascript视频教程、vue.js教程】