建设招标网 手机官方网站,千锋教育官方网,南宁网站建设索q479185700,手机做推广比较好的网站今天#xff0c;我们开始学习vue中一个很关键的知识点#xff0c;路由。理解vue的一个插件库#xff0c;专门用来实现SPA应用单页web应用整个应用只有一个完整的页面点击页面中的导航连接不会刷新页面#xff0c;只会做页面的局部更新数据需要通过ajax请求获取下来#xf…今天我们开始学习vue中一个很关键的知识点路由。理解vue的一个插件库专门用来实现SPA应用单页web应用整个应用只有一个完整的页面点击页面中的导航连接不会刷新页面只会做页面的局部更新数据需要通过ajax请求获取下来看一下工程结构这里注意一下我们为了区分一般组件和路由组件会统一把路由组件放在pages目录下。首先我们要先安装vue-router插件npm -i vue-router这里需要注意版本的问题然后在main.js中导入并使用路由main.jsimport Vue from vue
import App from ./App.vue
import VueRouter from vue-router
//引入路由器
import router from ./router/index//关闭Vue的生产提示
Vue.config.productionTip false
Vue.use(VueRouter)
new Vue({render: h h(App),router: router,
}).$mount(#app)
创建路由规则router/index.js//该文件专门用于创建整个应用的路由器
import VueRouter from vue-router
//引入组件
import About from ../pages/About.vue
import Home from ../pages/Home.vue//创建并暴露一个路由器
export default new VueRouter({routes: [{path: /about,component: About,},{path: /home,component: Home,},],
})
接下来创建路由组件About.vuetemplatedivh2我是About/h2/div
/templatescriptexport default {name: About,}
/scriptstyle
/styleHome.vuetemplatedivh2我是Home/h2/div
/templatescriptexport default {name: Home,}
/scriptstyle
/style最后在app.vue中引入并使用路由组件进行相关的操作App.vuetemplatedivdiv classrowBanner //divdiv classrowdiv classcol-xs-2 col-xs-offset-2div classlist-grouprouter-link classlist-group-item active-classactiveto/aboutAbout/router-linkrouter-link classlist-group-item active-classactiveto/homeHome/router-link/div/divdiv classcol-xs-6div classpaneldiv classpanel-bodyrouter-view/router-view/div/div/div/div/div
/templatescriptimport Banner from ./components/Banner.vueexport default {name: App,components: { Banner },}
/script结果如下以上就是用过一个案例来使用vue-router。我是空谷有来人谢谢支持。
