vuejs之路由应用之一
程序员文章站
2022-05-03 12:08:13
什么是‘路由’,路由相当于一个映射,一个url地址对应一个组件,当url地址A变为url地址B,那么对应地址A的组件就会改变为对应地址B的组件。应用于spa,即:单页应用,url地址改变,它不会跳转页面,只会用url对应的模块取代上一个url对应的模块,始终都在一个页面操作。取代了传统的多页应用。值 ......
什么是‘路由’,路由相当于一个映射,一个url地址对应一个组件,当url地址a变为url地址b,那么对应地址a的组件就会改变为对应地址b的组件。应用于spa,即:单页应用,url地址改变,它不会跳转页面,只会用url对应的模块取代上一个url对应的模块,始终都在一个页面操作。取代了传统的多页应用。值得高兴的是,虽然,都在一个页面进行操作,但是浏览器的‘前进’,'后退'都可以正常使用。
路由的使用步骤:1:安装路由 npm i vue-router --save
2:引入模块:
import router from 'vue-router'
import vue from 'vue' import home from '插件路径'
3:作为vue的插件:
vue.use(router)
4:实例化路由:
let router=new router({ routes:[{path:'/',component:'home'}]);
5:default export router
注意:2,3,4步骤都写在router/index.js页面,以后需要添加新的view视图都可以在该页面配置对应的路由
6 :告诉路由渲染的位置:<router-view></router-view>
7:在main.js中导入路由模块
import vue from 'vue'
import app from '路径'
import router from './router'
new vue({
el:'#app',
router,
template:'<app/>',
components:{app}
)}
下一篇: 判断应用是否处于前台