vue框架之路由

路由

• 单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

1.vue-router介绍

• 可以配置组件和路由映射,可以使用 Vue.js + vue-router 创建单页应用。

2.vue-router安装

npm install vue-router –save

3.初探vue-router

• 默认配好的映射组件会加载到router-view中，可以使用router-link进行页面跳转；

html：
<router-link to="/">首页</router-link>
<router-link to="/list">列表页</router-link>
<router-view></router-view>

JavaScript：
var Hello = {template:'<div>Hello</div>'};
var List = {template:'<div>List</div>'};
const routes = [
{path:'/',component:Hello},
{path:'/list',component:List},
];
const router = new VueRouter({
routes
});
var vm = new Vue({
el:'#app',
router
})

4.路由参数

• vue-router提供了一个$route对象，如果要获取路径传递参,数据会全部存放在params对象中

<router-link to="/article/1">文章1</router-link>
<router-link to="/article/2">文章2</router-link>
const routes = [
{path:'/article/:sid',component:Article}
];
var Article = {
template:'<div>这是第{{$route.params.sid}}篇文章</div>',
watch:{
$route(to,from){
//to代表要去的路由
//from代表从哪里来的
var id = to.params.sid;
console.log(id);
   }
 }
}；

想监控路径参数变化只能使用watch

5.路由嵌套

可以嵌套路由，可以指定父子关系，实现多router-view
+ 访问关系

/foods 食物
/foods/fruit 食物 水果类
/foods/greens 食物 蔬菜类

<div id="app">
<router-view></router-view>
</div>

let Foods = {
template:`
<div>
<router-link to="/foods/fruit">水果</router-link>
<router-link to="/foods/greens">蔬菜</router-link>
<div>食物</div>
<router-view></router-view>
</div>
`
 };
let Fruit = {template:'<div>foods</div>'};
let Greens = {template:'<div>greens</div>'};
const routes = [
{
path:'/foods',
component:Foods,
children:[
   {path:'',component:Tip}, //增加默认展示内容
   {path:'fruit',component:Fruit},
   {path:'greens',component:Greens},
    ]
  }
];

6.路由跳转

• 跳转新的路由(会产生历史记录)

  router.push({path:’/foods/fruit’,query:{name:1}});

• 替换当前路由并跳转(不产生历史记录)

  router.replace(‘/foods/fruit’);

• 前进和后退

  router.go(n); //n是数字类型表示前进/后退几个

• 命名路由

  {path:’/home’, component:Home,name:’home’}
  router.push({name:’home’);

• 重定向路由

  {path:’*’,redirect:’/home’}

• 配置导航别名

  {path:’*’,redirect:’/home’,alias:’/jw’}

7.7.多视图

• 一个路径下需要视同多个router-view,通过name属性展现不同的组件

<router-link to="/home">home</router-link>
<router-view name="home"></router-view>
<router-view name="menu"></router-view>
const routes = [
{path:'/home',components:{home:Home,menu:Menu},},
]

8.监控路由变化

• to去哪个路由
• from是从哪个路由来
• next是决定是否继续执行

全局监控

router.beforeEach((to,from,next)=> {
if(to.path == '/home'){
next({path:'/list'});//如果路由是home则跳转到list
  }
next();//调用next会继续向下执行
 });

每个导航中也可以增加自己的钩子函数叫beforeEnter用法同beforeEach

在组件中监控

beforeRouteEnter(to,from,next){
//在加载某个组件，路由进入之前，可以执行ajax操作
setTimeout(function () {
next(vm=>{
vm.msg = 'world';
    })
 },2000);
})

9.ajax获取数据

导航完成之前获取

beforeRouteEnter(to,from,next){ //在有路径参数情况时切换只调用一次，不会多次调用
alert('获取数据');
setTimeout(function () {
next();
  },2000)
},
watch:{ //路径参数需要watch来监控
$route(){
alert('获取数据')
  }
}

导航完成之后获取

• 使用生命周期(我认为很重要的)在组件实例创建完成后获取数据

created(){
setTimeout(()=>{
this.msg = 'world'
   },2000)
},
watch:{
$route(){
alert('获取数据')
  }
}

10.使用browserHistory

• 使用浏览器自带的history api实现
  

routes:[],
mode:’histroy’

11.滚动行为

• 每次切换导航时回到页面顶部，当后退时实现浏览器自动记录功能

scrollBehavior(to, from, save){
if (save) {
return save
} else {
return {x: 0, y: 0}
 }
}

ps：router基本使用还有更加深入的，后续有时间会写出一些案例来