溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

引用vue.js使用路由的方法

發(fā)布時(shí)間：2020-12-18 09:56:20 來(lái)源：億速云 閱讀：353 作者：小新 欄目：編程語(yǔ)言

這篇文章主要介紹引用vue.js使用路由的方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

直接引用vue.js使用路由的方法：首先引入【vue.JS】和【vue-router.JS】；然后創(chuàng)建掛載的dom元素，并創(chuàng)建路由組件；接著定義路由，并創(chuàng)建router實(shí)例；最后創(chuàng)建vue實(shí)例并掛載。

直接引用vue.js使用路由的方法：

直接引入 vue.js 的方式使用路由很簡(jiǎn)單, 只需要再直接引入一個(gè) vue-router.JS 即可.

具體的實(shí)現(xiàn)步驟:

1, 引入 vue.JS 和 vue-router.JS

<script src="https://unpkg.com/vue/dist/vue.js">
</script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js">
</script>

2, 創(chuàng)建掛載的 dom 元素

<div id="app"></App>

3, 創(chuàng)建路由組件

const com1 = {
template: '<div > 路由 1</div>'
}
const com2 = {
template: '<div > 路由 2</div>'
}

4, 定義路由

const routes = [
   { path: '/hash2', component: com1 },
   { path: '/hash3', component: com2 }
]

5, 創(chuàng)建 router 實(shí)例

const router = new VueRouter({
   routes
})

6, 創(chuàng)建 vue 實(shí)例并掛載

const App = new Vue({
  router
}).$mount('#app');

下面是具體的代碼:

<!DOCTYPE HTML>
<HTML>
  
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>
      Document
    </title>
    <script src="https://unpkg.com/vue/dist/vue.js">
    </script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js">
    </script>
  </head>
  
  <body>
    <div id="app">
      <h2>
        Hello !
      </h2>
      <p>
        <!-- 使用 router-link 組件來(lái)導(dǎo)航. -->
        <!-- 通過(guò)傳入 `to` 屬性指定鏈接. -->
        <!-- <router-link> 默認(rèn)會(huì)被渲染成一個(gè) `<a>` 標(biāo)簽 -->
        <router-link to="/hash2">
          切換至 com1
        </router-link>
        <router-link to="/hash3">
          切換至 com2
        </router-link>
      </p>
      <!-- 路由出口 -->
      <!-- 路由匹配到的組件將渲染在這里 -->
      <router-view>
      </router-view>
      <!-- router-link 上的其他屬性: -->
      <!-- 設(shè)置 replace 屬性的話, 當(dāng)點(diǎn)擊時(shí), 會(huì)調(diào)用 router.replace() 而不是 router.push(), 導(dǎo)航后不會(huì)留下
      history 記錄. -->
      <!-- <router-link :to="{ path:'/abc'}" replace></router-link> -->
      <!-- 有時(shí)候想要 <router-link> 渲染成某種標(biāo)簽, 例如 <li>. 于是我們使用
      tag prop 類指定何種標(biāo)簽, 同樣它還是會(huì)監(jiān)聽(tīng)點(diǎn)擊, 觸發(fā)導(dǎo)航. -->
      <!-- <router-link to="/foo" tag="li">foo</router-link> -->
      <!-- active-class 設(shè)置 鏈接激活時(shí)使用的 CSS -->
      <!-- event 聲明可以用來(lái)觸發(fā)導(dǎo)航的事件. 可以是一個(gè)字符串或是一個(gè)包含字符串的數(shù)組. -->
    </div>
  </body>
  <script>
    // 1. 定義 (路由) 組件.
    const com1 = {
      template: '<div > 路由 1</div>'
    }
    const com2 = {
      template: '<div > 路由 2</div>'
    }
    // 2. 定義路由
    // 每個(gè)路由應(yīng)該映射一個(gè)組件. 其中 "component" 可以是 通過(guò) Vue.extend()
    //  創(chuàng)建的組件構(gòu)造器, 或者, 只是一個(gè)組件配置對(duì)象.
    const routes = [{
      path: '/hash2',
      component: com1
    },
    {
      path: '/hash3',
      component: com2
    }]
    // 3. 創(chuàng)建 router 實(shí)例, 然后傳 `routes` 配置
    const router = new VueRouter({
      routes // (縮寫)相當(dāng)于 routes: routes
    })
    // 4. 創(chuàng)建和掛載根實(shí)例.
    // 要通過(guò) router 配置參數(shù)注入路由, 從而讓整個(gè)應(yīng)用都有路由功能
    const App = new Vue({
      router
    }).$mount('#app'); //el 是自動(dòng)掛載, mount 是手動(dòng)掛載(延時(shí))
    
  </script>
 
</HTML>

以上是“引用vue.js使用路由的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手