vue-router如何安裝與使用

本篇內容主要講解“vue-router如何安裝與使用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vue-router如何安裝與使用”吧!

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中內容如下：

注：雖然在這里已經注冊了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中關鍵配置如下：

<template>
  <div id="app">
    <h3>我是app組件</h3>
    
    <!-- 通過router自帶標簽實現 -->
    <router-link to='/home' tag="button" replace active-class="active">首頁</router-link>
    <router-link to='/about' tag="button" replace active-class="active">關于</router-link> 
    <router-link :to="'/user/'+userId" tag="button" active-class='active'>用戶</router-link>
    <router-link :to="{path:'/profile',query:{name:'yzk',age:18,height:1.88}}">檔案</router-link>
    <!-- <router-link to='/home' tag="button" replace>首頁</router-link>
    <router-link to='/about' tag="button" replace >關于</router-link>-->

    <!-- 通過代碼跳轉 -->
    <!-- 
    <button @click="homeClick">首頁</button>
    <button @click="aboutClick">關于</button> 
    -->
    <keep-alive>
      <router-view></router-view>
    </keep-alive>

    <button @click="userClick">用戶2</button>
    <button @click="profileClick">檔案</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data(){
    return{
      userId:'yzk'
    }
  },
  methods: {
    aboutClick() {
      // 通過代碼的方式修改路由 vue-router
      // 不能如下操作：此操作會繞過路由進行修改，違背初衷
      // history.pushState({},'','home')
      // this.$router.push("/home");
      this.$router.replace("/home");
      console.log("about");
    },
    homeClick() {
      // this.$router.push("/about");
      this.$router.replace("/about");
      console.log("home");
    },
    userClick(){
      this.$router.push('/user/'+this.userId);
    },
    profileClick(){
      this.$router.push({
        path:'/profile',
        query:{
          name:'kobe',
          age:18,
          height:1.98
        }
      })
    }
  },
};
</script>

<style>
.router-link-active {
  color: red;
}
.active {
  color: pink;
}
</style>

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)
})

到此，相信大家對“vue-router如何安裝與使用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！