Comment utiliser le routage dans vue-cli

Cet article présente principalement comment utiliser le routage dans vue-cli et vous donne une référence. J'espère qu'il pourra vous aider à utiliser correctement le routage dans vue-cli.

1. Tout d'abord, y a-t-il vue-router dans npm

Habituellement, le package de dépendances a été téléchargé lors de l'utilisation de vue-cli

2 Lors de l'utilisation de vue, ces fichiers sont normalement impliqués

demo/src/router/index.js

import Vue from 'vue'

import Router from 'vue-router'

import Hello from '../components/Hello'//首页

import Test from '../components/test'//需要跳转的页面 给组件重新命名

 

Vue.use(Router)

 

export default new Router({

 routes: [

  {//首页

   path: '/',

   name: 'Hello',

   component: Hello

  },

  {//需要跳转的页面

    path:'/test',

    name:'test',

    component:Test//组件名字

  }

 ]

})

demo/src/app.vue

<template>

 <p id="app">

  <img src="./assets/logo.png">

  <p>

  <router-link to="/home">home</router-link>//跳转首页

  <router-link to="/test">test</router-link>//跳转新页面

  </p>

  <router-view></router-view>//页面渲染放置的部分

 </p>

 

</template>

 

<script>

export default {

 name: &#39;app&#39;

}

</script>

 

<style>

#app {

 font-family: &#39;Avenir&#39;, Helvetica, Arial, sans-serif;

 -webkit-font-smoothing: antialiased;

 -moz-osx-font-smoothing: grayscale;

 text-align: center;

 color: #2c3e50;

 margin-top: 60px;

}

</style>

demo/src/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,

 template: &#39;<App/>&#39;,

 components: { App }

}).$mount(&#39;#app&#39;)//实例挂载到元素中

Composants de deux pages

Dans ce cas, le routage de base Les paramètres sont prêts . Vous pouvez exécuter ce projet selon le développement normal de npm run

De plus, il existe plusieurs routes personnalisées imbriquées

Vous pouvez afficher le contenu de routage spécifique : https://router .vuejs. org/zh-cn/installation.html

Recommandations associées :

Explication détaillée de l'utilisation du routage pour retarder le chargement des instances de module angulaire

Utilisation du routage et de $location pour changer de vue dans angulaire_AngularJS

Implémentation Vue-Router2 de l'exemple d'explication de la fonction de routage

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!