How to use routing in vue-cli

This article mainly introduces how to use routing in vue-cli, and gives you a reference. I hope it can help you use routing in vue-cli correctly.

1. First, is there vue-router in npm?

Usually the dependency package has been downloaded when vue-cli is installed

2. When using vue, these files normally need to be involved

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;)//实例挂载到元素中

Components of two pages

In this case, the basic routing settings will be fine. Run this project according to the normal npm run dev

In addition, there are multiple nested custom routes

The specific routing content can be viewed: https://router.vuejs.org/zh -cn/installation.html

Related recommendations:

Detailed explanation of using routing to delay loading Angular module instances

Used in angular Routing and $location switching view_AngularJS

Vue-Router2 implementation of routing function example explanation

The above is the detailed content of How to use routing in vue-cli. For more information, please follow other related articles on the PHP Chinese website!