欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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}

)}