直接引用vue.js怎样使用路由-View.js-php.cn

Rumah

hujung hadapan web

View.js

直接引用vue.js怎样使用路由

coldplay.xixi

Dec 17, 2020 pm 02:30 PM

penghalaan

直接引用vue.js使用路由的方法：首先引入【vue.JS】和【vue-router.JS】；然后创建挂载的dom元素，并创建路由组件；接着定义路由，并创建router实例；最后创建vue实例并挂载。

直接引用vue.js怎样使用路由

本教程操作环境：windows7系统、Vue2.9.6版，该方法适用于所有品牌电脑。

【相关文章推荐：vue.js】

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

直接引入 vue.js 的方式使用路由很简单, 只需要再直接引入一个 vue-router.JS 即可.

具体的实现步骤:

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>

Salin selepas log masuk

2, 创建挂载的 dom 元素

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

Salin selepas log masuk

3, 创建路由组件

const com1 = {
template: &#39;<div > 路由 1</div>&#39;
}
const com2 = {
template: &#39;<div > 路由 2</div>&#39;
}

Salin selepas log masuk

4, 定义路由

const routes = [
   { path: &#39;/hash1&#39;, component: com1 },
   { path: &#39;/hash2&#39;, component: com2 }
]

Salin selepas log masuk

5, 创建 router 实例

const router = new VueRouter({
   routes
})

Salin selepas log masuk

6, 创建 vue 实例并挂载

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

Salin selepas log masuk

下面是具体的代码:

<!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">
      <h1>
        Hello !
      </h1>
      <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/hash1">
          切换至 com1
        </router-link>
        <router-link to="/hash2">
          切换至 com2
        </router-link>
      </p>
      <!-- 路由出口 -->
      <!-- 路由匹配到的组件将渲染在这里 -->
      <router-view>
      </router-view>
      <!-- router-link 上的其他属性: -->
      <!-- 设置 replace 属性的话, 当点击时, 会调用 router.replace() 而不是 router.push(), 导航后不会留下
      history 记录. -->
      <!-- <router-link :to="{ path:&#39;/abc&#39;}" replace></router-link> -->
      <!-- 有时候想要 <router-link> 渲染成某种标签, 例如 <li>. 于是我们使用
      tag prop 类指定何种标签, 同样它还是会监听点击, 触发导航. -->
      <!-- <router-link to="/foo" tag="li">foo</router-link> -->
      <!-- active-class 设置 链接激活时使用的 CSS -->
      <!-- event 声明可以用来触发导航的事件. 可以是一个字符串或是一个包含字符串的数组. -->
    </div>
  </body>
  <script>
    // 1. 定义 (路由) 组件.
    const com1 = {
      template: &#39;<div > 路由 1</div>&#39;
    }
    const com2 = {
      template: &#39;<div > 路由 2</div>&#39;
    }
    // 2. 定义路由
    // 每个路由应该映射一个组件. 其中 "component" 可以是 通过 Vue.extend()
    //  创建的组件构造器, 或者, 只是一个组件配置对象.
    const routes = [{
      path: &#39;/hash1&#39;,
      component: com1
    },
    {
      path: &#39;/hash2&#39;,
      component: com2
    }]
    // 3. 创建 router 实例, 然后传 `routes` 配置
    const router = new VueRouter({
      routes // (缩写)相当于 routes: routes
    })
    // 4. 创建和挂载根实例.
    // 要通过 router 配置参数注入路由, 从而让整个应用都有路由功能
    const App = new Vue({
      router
    }).$mount(&#39;#app&#39;); //el 是自动挂载, mount 是手动挂载(延时)
    
  </script>
 
</HTML>

Salin selepas log masuk

相关学习推荐：js视频教程

Atas ialah kandungan terperinci 直接引用vue.js怎样使用路由. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Tetapan grafik terbaik

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

2 minggu yang lalu By DDD

R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Cara Membuka Segala -galanya Di Myrise

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7467

Tutorial CakePHP

1376

Apakah format nama akaun stim

kunci pengaktifan win11 kekal

Sambungan NYT menunjukkan dan jawapan

Tunjukkan Lagi

Related knowledge

3 Cara untuk Betulkan Penghala Hilang Kenalan dengan Ralat Pelayan Masa NTP May 22, 2023 pm 03:43 PM

Isu sambungan dan WiFi boleh menjadi sangat mengecewakan dan mengurangkan produktiviti dengan ketara. Komputer menggunakan Network Time Protocol (NTP) untuk penyegerakan jam. Dalam kebanyakan kes, jika tidak semua, komputer riba anda menggunakan NTP untuk menjejak masa. Jika pelayan anda terputus hubungan kerana mesej ralat pelayan masa NTP, baca artikel ini hingga akhir untuk mengetahui cara membetulkannya. Apakah yang berlaku apabila masa penghala ditetapkan dengan tidak betul? Prestasi penghala biasanya tidak terjejas oleh tetapan masa yang salah, jadi sambungan anda mungkin tidak terjejas. Walau bagaimanapun, beberapa masalah mungkin timbul. Ini termasuk: Masa yang salah untuk semua alat yang menggunakan penghala sebagai pelayan waktu tempatan. Cap masa dalam data log penghala akan menjadi salah. jika disebabkan

Cara Membetulkan Tiada Isu Keselamatan Internet pada Windows 11/10 May 11, 2023 pm 10:07 PM

Salah satu isu berkaitan sambungan internet yang dilihat pada komputer Windows 11/10 ialah mesej ralat "Tiada internet, selamat". Pada asasnya, mesej ralat ini menunjukkan bahawa sistem disambungkan ke rangkaian, tetapi disebabkan masalah dengan sambungan, anda tidak dapat membuka mana-mana halaman web dan menerima data. Anda mungkin menghadapi ralat ini semasa menyambung ke mana-mana rangkaian dalam Windows, sebaik-baiknya apabila menyambung ke Internet melalui penghala WiFi yang tidak berdekatan. Biasanya, apabila anda menyemak ikon wayarles di penjuru kanan sebelah bawah dulang sistem, anda akan melihat segitiga kuning kecil, dan apabila anda mengkliknya, mesej Tiada Internet, Keselamatan akan muncul. Tiada sebab khusus mengapa mesej ralat ini berlaku, tetapi perubahan pada tetapan konfigurasi mungkin menyebabkan penghala anda tidak dapat menyambung

Cara melaksanakan penghalaan API dalam rangka kerja Slim Aug 02, 2023 pm 05:13 PM

Cara melaksanakan penghalaan API dalam rangka kerja Slim Slim ialah rangka kerja mikro PHP ringan yang menyediakan cara mudah dan fleksibel untuk membina aplikasi web. Salah satu ciri utama ialah pelaksanaan penghalaan API, membolehkan kami memetakan permintaan yang berbeza kepada pengendali yang sepadan. Artikel ini akan memperkenalkan cara melaksanakan penghalaan API dalam rangka kerja Slim dan memberikan beberapa contoh kod. Pertama, kita perlu memasang rangka kerja Slim. Versi terbaru Slim boleh dipasang melalui Komposer. Buka terminal dan

Java Apache Camel: Membina seni bina berorientasikan perkhidmatan yang fleksibel dan cekap Feb 19, 2024 pm 04:12 PM

Apache Camel ialah rangka kerja penyepaduan berasaskan Bas Perkhidmatan Perusahaan (ESB) yang mudah menyepadukan aplikasi, perkhidmatan dan sumber data yang berbeza untuk mengautomasikan proses perniagaan yang kompleks. ApacheCamel menggunakan konfigurasi berasaskan laluan untuk mentakrif dan mengurus proses penyepaduan dengan mudah. Ciri utama ApacheCamel termasuk: Fleksibiliti: ApacheCamel boleh disepadukan dengan mudah dengan pelbagai aplikasi, perkhidmatan dan sumber data. Ia menyokong pelbagai protokol, termasuk HTTP, JMS, SOAP, FTP, dll. Kecekapan: ApacheCamel sangat cekap, ia boleh mengendalikan sejumlah besar mesej. Ia menggunakan mekanisme pemesejan tak segerak, yang meningkatkan prestasi. Boleh dikembangkan

Bagaimana untuk menggunakan penghalaan untuk menyesuaikan kesan animasi penukaran halaman dalam projek Vue? Jul 21, 2023 pm 02:37 PM

Bagaimana untuk menggunakan penghalaan untuk menyesuaikan kesan animasi penukaran halaman dalam projek Vue? Pengenalan: Dalam projek Vue, penghalaan adalah salah satu fungsi yang sering kami gunakan. Pertukaran antara halaman boleh dicapai melalui penghalaan, memberikan pengalaman pengguna yang baik. Untuk menjadikan penukaran halaman lebih jelas, kami boleh mencapainya dengan menyesuaikan kesan animasi. Artikel ini akan memperkenalkan cara menggunakan penghalaan untuk menyesuaikan kesan animasi penukaran halaman dalam projek Vue. Buat projek Vue Pertama, kita perlu mencipta projek Vue. Anda boleh menggunakan VueCLI untuk membina dengan cepat

Bolehkah penghalaan digunakan untuk mempertahankan daripada penipuan ARP, menyekat ribut penyiaran dan mempertahankan daripada virus intranet? May 22, 2023 am 08:52 AM

Laluan yang dinyatakan di sini adalah laluan di atas seribu yuan, dan kami tidak akan bercakap tentang laluan di bawah seribu yuan. Pada masa kini, banyak penghala perusahaan mengatakan bahawa mereka mempunyai fungsi sedemikian, tetapi fungsi sedemikian memerlukan prasyarat, iaitu, komputer mesti disambungkan terus ke penghala Jika ia dipisahkan oleh suis, fungsi ini akan menjadi tidak berguna kepada komputer. Masalah seperti badai penyiaran dan penipuan ARP dalam LAN adalah masalah yang sangat biasa. Ia bukan masalah besar, tetapi ia sangat menjengkelkan. Tidak sukar untuk menyelesaikan ribut penyiaran, penipuan ARP atau gelung rangkaian Kesukarannya terletak pada cara mengesan masalah ini. Syorkan pemalam "Buddha Nature" untuk sistem kami. Sebab mengapa kami menyebut "Sifat Buddha" adalah kerana fungsi pengesanan ini berdasarkan pengurusan tingkah laku Internet dan teras analisis data pemantauan rangkaian, dan hanya pengurusan tingkah laku Internet yang boleh melakukannya

Cara menggunakan penghalaan dalam ThinkPHP6 Jun 20, 2023 pm 07:54 PM

ThinkPHP6 ialah rangka kerja PHP yang berkuasa dengan fungsi penghalaan mudah yang boleh melaksanakan konfigurasi penghalaan URL dengan mudah Pada masa yang sama, ThinkPHP6 juga menyokong berbilang mod penghalaan, seperti GET, POST, PUT, DELETE, dll. Artikel ini akan memperkenalkan cara menggunakan ThinkPHP6 untuk konfigurasi penghalaan. 1. Mod penghalaan ThinkPHP6 Kaedah GET: Kaedah GET ialah satu cara untuk mendapatkan data dan sering digunakan untuk paparan halaman. Dalam ThinkPHP6, anda boleh menggunakan yang berikut

Cara Membaiki iPhone WiFi Terus Terputus Sambungan Berulang kali [Diselesaikan] May 20, 2023 pm 01:55 PM

Ramai pengguna iPhone telah menyatakan kekecewaan dengan salah satu isu serius yang mereka hadapi pada iPhone mereka. Masalahnya ialah iPhone mereka terputus sambungan dari Wi-Fi dari semasa ke semasa. Ini sememangnya isu utama kerana Wi-Fi adalah keperluan untuk menggunakan kebanyakan aplikasi pada iPhone anda. Kami telah menganalisis isu ini dengan teliti dan mengenal pasti faktor yang mungkin bertanggungjawab dan menyenaraikannya di bawah. Tetapan autocantum dilumpuhkan Sesetengah isu dalam tetapan rangkaian Tukar kata laluan Wi-Fi Isu penghala Wi-Fi yang ditukar Selepas melihat faktor-faktor yang dinyatakan di atas ini, kami telah menyusun satu set penyelesaian yang boleh membetulkan isu pemotongan sambungan dengan isu Wi-Fi iPhone. Betulkan 1 – Hidupkan tetapan autocantum Wi-Fi jika Wi-Fi tidak didayakan

See all articles