禹州市城乡建设局网站,网站 备案,制作棋牌app软件要多少钱,莆田 做网站的公司路由#xff1a; 1.理解#xff1a;一个路由(route)就是一组映射关系#xff08;key-value)#xff0c;多个路由需要路由器#xff08;router#xff09;进行管理。 2.前端路由#xff1a;key是路径#xff0c;value是组件。 1、先安装vue-router路由
npm i vue-route… 路由 1.理解一个路由(route)就是一组映射关系key-value)多个路由需要路由器router进行管理。 2.前端路由key是路径value是组件。 1、先安装vue-router路由
npm i vue-router3 2.main.js中应用插件
import Vue from vue
import App from ./App.vue
//引入VueRouter
import VueRouter from vue-router;
//引入自己配置完的路由
import router from ./router//关闭vue生产提示
Vue.config.productionTip false
//应用插件
Vue.use(VueRouter)
new Vue({el:#app,render: h h(App),router:router
})app.vue
templatedivdivh2Vue/h2/divdiv
!-- 原始html中我们使用a标签.实现页面的跳转 --
!-- buttona hrefhome.htmlAAAAAAAA/a/buttonbr--
!-- buttona hrefabout.htmlBBBBBBBB/a/button--!--Vue中借助router-link标签实现路由的切换 --router-link to/home active-classactiveHome/router-linkbrrouter-link to/about active-classactiveAbout/router-link/divdiv!--指定组件的呈现位置--router-view/router-view/div/div/templatescriptexport default {name: App,components: {}
}
/scriptstyle/stylecomponents.About.vue
templatedivh2我是About/h2/div
/templatescript
export default {name: MyAbout
}
/scriptstyle scoped/style
components.Home.vue
templatedivh2我是home/h2/div
/templatescript
export default {name: MyHome
}
/scriptstyle scoped/style
3.创建路由router文件夹
router.index.js
//该文件专门用于创建整个文件的路由器
import VueRouter from vue-routerimport About from /components/About;
import Home from /components/Home;//创建一个路由器
export default new VueRouter({routes:[{path:/about,component:About},{path:/home,component:Home}]
})
完成
