How to use router in vue-cli

This article mainly introduces the basic usage of vue-cli router in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

1. Create a new router directory in the src directory, and then create index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import goods from '@/components/goods/goods';

Vue.use(VueRouter);

export default new VueRouter({
 routes: [
  {
   path: '/',
   redirect: {name: 'goods'}
  }
});

The @ in the code is in webpack.base.conf.js The purpose of the modified configuration is that it is too troublesome to write a relative path every time a file such as a component is introduced. Just use @ instead. The configuration modification is as follows

 resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
   'vue$': 'vue/dist/vue.esm.js',
   '@': resolve('src'),
  }
 }

2, Introduce it into the entry file main.js and mount it on the node

import router from './router';

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 template: &#39;<App/>&#39;,
 components: { App }
});

3. Use it in the App.vue file, for example. Click to switch the route, and the content will be presented in In the router-view container

<template>
 <p id="app">
  <p class="tab">
    <router-link to="/goods" >商品</router-link>
  </p>
  <router-view></router-view>
 </p>
</template>

If there are three clicks to switch routes, such as products, merchants, and comments, if you want to set the style of a node currently clicked, you can set

.router-link-active {color: rgb(139,0,0);}

vue-router routing basic instance sharing

Router solves page jumps under cross-modules

vue router imitates the bottom of Tmall Navigation bar example sharing

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