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

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

創(chuàng)新互聯(lián)專注于企業(yè)全網(wǎng)營(yíng)銷推廣、網(wǎng)站重做改版、中方網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5網(wǎng)站設(shè)計(jì)、商城網(wǎng)站制作、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為中方等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

直接引用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)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

名稱欄目：引用vue.js使用路由的方法
轉(zhuǎn)載來(lái)源：http://bm7419.com/article12/jcsddc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開(kāi)發(fā)、定制網(wǎng)站、網(wǎng)站制作、商城網(wǎng)站、電子商務(wù)、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)