No two cases --- routing and routing
No route
See the start page
In the file main.js (entry file vue project) in
Here you can see, generated vue example of a global, binding in the #app above, that is, that div in the index.html file.
Then the vue example, using ./App this component, then the template is: '<App />', is described that is rendered with App assembly.
Look index.html file
And then went to see App.vue
App.vue this component, IMG is a template, the following is a component, in './components/HelloWorld' in.
Reference component import HelloWorld from './components/HelloWorld', look at what hello.vue this component, the basic is the individual links below
Routing (important)
Index.html file has not changed
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>leyou-manage-web</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
入口文件main.js多了路由参数
/* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })
App.vue文件多了router-view
<template> <router-view></router-view> </template> <script> export default { name:"App" } </script>
也就是说路由会替换掉这个router-view进行显示
再看router/index.js
也就是说‘/’默认路由会使用Helloword这个组件进行显示了，添加其他的路由再对应上相应的组件即可进行显示。