Vue中的路由
Vue中的路由（Routing）是通过Vue Router这个官方提供的路由管理器来实现的。Vue Router允许你通过不同的URL访问应用中不同的页面（组件），而无需重新加载页面。这对于构建单页应用（SPA, Single Page Application）至关重要。
使用步骤
1.定义路由对象
//script:
router: new VueRouter({routes:[{path:"/",component:{template:"#tianmao"}},{path:"/tianmao",component:{template:"#tianmao"}},{path:"/taobao",component:{template:"#taobao"}},{path:"/jingdong",component:{template:"#jingdong"}}]
})//html:
<ul id="list"><li><!-- router-link 代替a链接to属性代替a链接中的href属性 --><router-link to="/tianmao">天猫</router-link></li><li><router-link to="/taobao">淘宝</router-link></li><li><router-link to="/jingdong">京东</router-link></li></ul><!-- 路由的占位 --><router-view></router-view>
router-link 代替a链接
to属性代替a链接中的href属性
router-view路由的占位
router:实例的路由属性
VueRouter:Vue官方提供的路由对象
routes:路由的详细配置信息
$router:所有的路由
$route:当前路由
全局路由的定义方式：
//script
// 全局路由
let routes = [{path: "/", component: model1},{path: "/jingdong", component: jingdong},{path: "/taobao", component: taobao}
]
let router = new VueRouter({routes
})
let vm = new Vue({data() {return {}},router
})
Vue-cli项目的介绍
1.项目目录
src目录下是我们编写代码的文件，其目录下还包括vue.config.js是编写配置文件的位置。
App.vue是全局组件的文件，在其中写一些所有组件共有的代码，例如公共样式，公共数据等。
main.js中写的全局的公共组件。
2.组件介绍
template标签中是组件的容器View部分
script标签中定义了组件的Model部分
当前组件的样式 scoped表示样式私有化，通过scoped定义的样式只能在当前组件使用。
路由在Vue-cli项目中的使用
在项目根目录下创建目录router，新建后缀为.js的文件，作为项目的路由配置文件。
// 导入Vue
import Vue from "vue";
// 导入路由
import VueRouter from "vue-router";
// 使用路由
Vue.use(VueRouter)// 导入所有通过路由跳转的组件
import HomeDemo from "@/components/home/HomeDemo.vue";
import MvDemo from "@/components/mv/MvDemo.vue";
import HotSinger from "@/components/singer/HotSinger.vue";
import CrossDemo from "@/components/cross/CrossDemo.vue";
import FuDemo from "@/components/datatransmit/FuDemo.vue";const router=new VueRouter({routes:[{path:"/",component:HomeDemo},{path:"/home",component:HomeDemo},{path:"/mv",component:MvDemo},{path:"/hot",component:HotSinger},{path:"/cross",component:CrossDemo},{path:"/tran",component:FuDemo}]
})
// 默认导出路由
export default router
接下来即可按照之前步骤在项目中使用路由。
