Vue Router
Vue.js 官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。
npm安装vue-cli（vue-cli是vue的脚手架）
npm install vue-cli -g
vue –version
创建项目
创建项目：
vue init webpack vue-demo
npm install命令作用：
将项目下的package.json的devDependencies字段里的插件会被自动安装到node_modules下。
npm install切换淘宝源：
npm config set registry https://registry.npm.taobao.org
npm install –registry=https://registry.npm.taobao.org
项目运行：
npm run dev
项目中使用路由
1、src/App.vue中添加
<header> <!-- router-link 定义点击后导航到哪个路径下 --> <router-link to="/">Index</router-link> <router-link to="/home">Home</router-link> <router-link to="/about">About</router-link></header>
2、src/components/中添加home.vue和about.vue
hoem.vue
<template> <div> <h1>home</h1> <p>{{msg}}</p> </div></template><script> export default { data () { return { msg: "我是home 组件" } } }</script>
about.vue
<template> <div> <h1>about</h1> <p>{{aboutMsg}}</p> </div></template><script> export default { data () { return { aboutMsg: '我是about组件' } } }</script>
2、src/router/index.js路由修改
import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'// 引入组件import home from '@/components/home.vue';import about from '@/components/about.vue';Vue.use(Router)const routes = [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path:"/home", component: home }, { path: "/about", component: about }]var router = new Router({ routes: routes})export default router;
4、运行项目
npm run dev
注意，注释掉如下图所示：
项目运行效果
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。