Home > Article > Web Front-end > 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: 'app' } </script> <style> #app { font-family: 'Avenir', 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: '<App/>', components: { App } }).$mount('#app')//实例挂载到元素中
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!