Vue路由的基本使用（2018/11/25）
安装 ：
每次新建vue项目需要用到路由的时候就需要在文件目录的CMD中安装 cnpm i vue-router --save
一、分步版的路由
操作步骤：
①在main.js中导入 import VueRouter from "vue-router" //属于第三方插件
②在main.js中 安装组件 Vue.use(VueRouter) //Vus.use 起到全局注册的作用 实际上是调用了VueRouter组件中的install（）方法去安装这个组件
③实例化
var router = new VueRouter({ // 实例化
routes:[
{
path:"/one", //这是路由的hash 路径 localhost：8080/#/one
component:one //这是路径下对应的组件
}
]
})
④注册 路由
new Vue({
el: '#app',
router:router, // 注册
components: { App },
template: '<App/>'
})
⑤ 引入对应的组件文件
import HelloWorld from './components/HelloWorld'
⑥在APP.vue中的 <template>中引入 路由组件 <router-view/>
二、组合版的VUE路由
在src路径下新建一个router文件夹-----> 然后建立一个index.js的文件 用index命名就可以直接访问到根路径“/”
src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router' // 1)引入路由的第三方插件
import one from '@/components/one' // 5）引入对应的组件文件
import HelloWorld from '@/components/HelloWorld' //@代表src文件 在src文件夹中的所有文件都可以通过src访问
Vue.use(VueRouter) // 2）安装
var router = new VueRouter({ // 3）实例化
routes:[
{
path:"/one", //这是路由的hash 路径 localhost：8080/#/one
component:one //这是路径下对应的组件
},
{
path:"/hello",
component:HelloWorld
}
]
})
export default router //将路由暴露出去
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
new Vue({
el: '#app',
router, //在此处注册路由 APP.vue才可以引入
components: { App },
template: '<App/>'
})
APP.vue
<template>
<div >
<router-view/> <!--6） 引入路由组件-->
<router-link to='/one'>one</router-link> <!-- 7）将路由的链接 渲染到页面上进行跳转-->
<router-link to='/hello'>hello</router-link>
</div>
</template>
路由的原理 router是前端路由 （根据hash值的不同切换不同的组件）
如何监控到hash值得变化？
hashchange 事件-------->能够监控hash值的变化
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.js"></script>
</head>
<body>
<a href="#/a">a</a> //分别建立了三个 html文件
<a href="#/b">b</a>
<a href="#/c">c</a>
<div >
</div>
<script type="text/javascript">
var routers=[
{
path:'/a',
component:'./components/a.html'
},
{
path:'/b',
component:'./components/b.html'
},
{
path:'/c',
component:'./components/c.html'
}
]
var cache={} //缓存对象
location.hash='#/a' //设置让a组件的内容直接显示在页面上
window.addEventListener("hashchange",()=>{ //利用hashchange事件 可以获取到hash值
// console.log(location.hash)
var hash = location.hash.replace("#",'') //将hash中的”#“去掉
console.log(hash)
routers.forEach((item)=>{ //利用foreach遍历routers中的每一项
if(item.path===hash){
if(cache[hash]){ //如果缓存对象里有 那么填入html的是之前缓存过的res
$("#router-view").html(cache[hash])
}else{
$.ajax(item.component).then((res)=>{//用ajax请求组件中的所有值
$("#router-view").html(res) //填入div中
cache[hash]=res //如果没有就将res的内容填入进去
console.log(cache[hash])
})
}
}
})
})
</script>
</body>
</html>
如果没有vue-router怎么切换组件？
（1）利用动态组件切换
（2）自己监控hash值变化，变化之后产生不同的组件
三、自动生成版的 VUE路由
在建立vue项目的时候 在是否安装vue-router 那一项选择yes src文件夹下就会自动生成一个router文件夹 其中的index.js文件就包含了router的基本样式
用不同的路由切换组件的思路：
先创建需要的组件----->在index.js中进行操作,引入这些组件，并设置路径对应的组件----->在APP.vue中引入组件的链接------>如果有子路由需要在父级组件中引入子组件的链接
index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import One from '@/components/One' //1)引入组件
import Two from '@/components/Two'
import Gn from '@/components/gn'
import Gj from '@/components/gj'
Vue.use(Router)
export default new Router({
routes: [ //2） 设置路径对应的组件
{
path:'/',
redirect:{'name':'one'} //通过name的重定向 当路径为”/“的时候跳转到one
},
{
path: '/one', //起一个路径名
name: 'one', // name---命名路由 当path的路径比较长的时候可以用name来访问
component:One //这是路径名对应得组件 要与import 引入的那个名称一样
},
{
path: '/two',
name: 'two',
component:Two,
redirect:{'path':'/two/gn'}, //通过路径的重定向
children:[ // 子路由 就是路由中嵌套了几个路由
{
path:'/two/gn',
component:Gn
},
{
path:'/two/gj',
component:Gj
}
]
}
]
})
APP.vue
<template>
<div >
<router-view/>
<router-link to="/one">one</router-link>
<router-link to="/two">two</router-link>
</div>
</template>
two.vue
<template>
<div>
two component
<router-view/>
<router-link to="/two/gn">国内新闻</router-link>
<router-link to="/two/gj">国际新闻</router-link>
</div>
</template>