Comment utiliser le routage en référençant directement vue.js-Voir.js-php.cn

Maison

interface Web

Voir.js

Comment utiliser le routage en référençant directement vue.js

Dec 17, 2020 pm 02:30 PM

路由

Citez directement vue.js pour utiliser le routage : introduisez d'abord [vue.JS] et [vue-router.JS] puis créez un élément dom monté et créez un composant de routage puis définissez la route, et créez ; une instance de routeur ; créez enfin une instance de vue et montez-la.

Comment utiliser le routage en référençant directement vue.js

L'environnement d'exploitation de ce tutoriel : Système Windows 7, Vue version 2.9.6 Cette méthode convient à toutes les marques d'ordinateurs.

[Articles connexes recommandés : vue.js]

Référence directe à vue.js en utilisant le routage :

Il est très simple d'utiliser le routage en introduisant directement vue.js. Il vous suffit d'en introduire directement un autre vue-router.JS.

Étapes spécifiques d'implémentation :

1 , introduisez vue.JS et vue-router.JS

&lt;script src=&quot;https://unpkg.com/vue/dist/vue.js&quot;&gt;
&lt;/script&gt;
&lt;script src=&quot;https://unpkg.com/vue-router/dist/vue-router.js&quot;&gt;
&lt;/script&gt;

Copier après la connexion

2, créez un élément dom monté

&lt;div id=&quot;app&quot;&gt;&lt;/App&gt;

Copier après la connexion

3, créez un composant de routage

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

Copier après la connexion

4, définissez la route

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

Copier après la connexion

5, créer une instance de routeur

const router = new VueRouter({
   routes
})

Copier après la connexion

6, créer une instance de vue et monter

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

Copier après la connexion

Voici le code spécifique :

&lt;!DOCTYPE HTML&gt;
&lt;HTML&gt;
  
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;
    &lt;title&gt;
      Document
    &lt;/title&gt;
    &lt;script src=&quot;https://unpkg.com/vue/dist/vue.js&quot;&gt;
    &lt;/script&gt;
    &lt;script src=&quot;https://unpkg.com/vue-router/dist/vue-router.js&quot;&gt;
    &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id=&quot;app&quot;&gt;
      &lt;h1&gt;
        Hello !
      &lt;/h1&gt;
      &lt;p&gt;
        &lt;!-- 使用 router-link 组件来导航. --&gt;
        &lt;!-- 通过传入 `to` 属性指定链接. --&gt;
        &lt;!-- &lt;router-link&gt; 默认会被渲染成一个 `&lt;a&gt;` 标签 --&gt;
        &lt;router-link to=&quot;/hash1&quot;&gt;
          切换至 com1
        &lt;/router-link&gt;
        &lt;router-link to=&quot;/hash2&quot;&gt;
          切换至 com2
        &lt;/router-link&gt;
      &lt;/p&gt;
      &lt;!-- 路由出口 --&gt;
      &lt;!-- 路由匹配到的组件将渲染在这里 --&gt;
      &lt;router-view&gt;
      &lt;/router-view&gt;
      &lt;!-- router-link 上的其他属性: --&gt;
      &lt;!-- 设置 replace 属性的话, 当点击时, 会调用 router.replace() 而不是 router.push(), 导航后不会留下
      history 记录. --&gt;
      &lt;!-- &lt;router-link :to=&quot;{ path:&#39;/abc&#39;}&quot; replace&gt;&lt;/router-link&gt; --&gt;
      &lt;!-- 有时候想要 &lt;router-link&gt; 渲染成某种标签, 例如 &lt;li&gt;. 于是我们使用
      tag prop 类指定何种标签, 同样它还是会监听点击, 触发导航. --&gt;
      &lt;!-- &lt;router-link to=&quot;/foo&quot; tag=&quot;li&quot;&gt;foo&lt;/router-link&gt; --&gt;
      &lt;!-- active-class 设置 链接激活时使用的 CSS --&gt;
      &lt;!-- event 声明可以用来触发导航的事件. 可以是一个字符串或是一个包含字符串的数组. --&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;script&gt;
    // 1. 定义 (路由) 组件.
    const com1 = {
      template: &#39;&lt;div &gt; 路由 1&lt;/div&gt;&#39;
    }
    const com2 = {
      template: &#39;&lt;div &gt; 路由 2&lt;/div&gt;&#39;
    }
    // 2. 定义路由
    // 每个路由应该映射一个组件. 其中 &quot;component&quot; 可以是 通过 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 是手动挂载(延时)
    
  &lt;/script&gt;
 
&lt;/HTML&gt;

Copier après la connexion

Connexe recommandations d'apprentissage : tutoriel vidéo js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn