VurRouter

/**

* Vue-router 基本用法

* npm install --save vue-router

*/

1, Router实例对象 

const RouterInstance = new Router({

/**

* mode 不设置默认使用 hash

* 就是使用#来设置路径

* history 模式通过/来设置路径

* 如果URL匹配不到任何的静态资源,则应该返回同一个index，

* 这个页面就是你 app 依赖的页面

*/

mode: 'history',

routes: Routers, // 路由对象

linkActiveClass: 'active-link', // 路由被激活

linkExactActiveClass: 'extract-active-link', // 路由完全匹配

scrollBehavior( to, from, savePostrion) {

// 页面路径跳转的时候滚动的行为

// to

if ( savePostrion) {

return savePostrion;

} else {

return { x: 0, y: 0 }

}

},

// 下面这几个属性基本用不到 

// fallback: true, // 不支持history前端路由的时候。自动设置到hash 如果不需要可以设置成false

// parseQuery( qyery) {}, // 把接受的参数 转换成object

// stringifyQuery( obj) {} // 把接受的参数 转换成string

})

 2, 路由对象的配置

const Routers = [{

path: '/index/:id', // 指定当前匹配的路径 // /index/xxx

name: 'index', //

component: Index, // 映射的组件

children: [{ // 子组件

path: '/one',

component: One

}],

meta: { // 保存路由的信息 通过this.$route

title: 'this is title',

description: '关键字'

},

alias: '/component/index', // 别名 //作用是将UI与URL任意的结合

beforeEnter : ( to, from, next) => { // 路由导航

// ...

console. log( '组件路由');

next();

},

/**

* props传递参数 通过props把参数传递到组件内部。

* 布尔模式

* props: { default: true, sidebar: false }

* 对象模式

* props: { newsletterPopup: false }

* 函数模式

* props: (route) => ({ query: route.query.q })

*/

props: true,

},

// 重定向

/**

* redirect 可以是以下的值：

* 1，字符串

* '/b'

* 2，可以是一个命名视图

* {name:'one'}

* 3,可以是方法

* to => {

* // 方法接受 目标路由 作为参数

* return 重定向的字符或者路径对象

* }

*/

{

path: '*', // 指定当前匹配的路径,不存在重定向到首页

redirect: '/index'

},

{

path: '/one/:id', // /index/xxx

name: 'one',

component: One,

},

{

path: '/two',

name: 'two',

component: Two,

},

{ // 命名视图

path: '/',

components: {

default: Index,

one: One,

two: Two

}

}

];

 

 3,导航守卫

 先执行全局导航守卫，然后执行路由配置导航守卫，最后执行组件内部导航守卫。

// 全局导航守卫---全局前置守卫

RouterInstance. beforeEach(( to, from, next) => {

console. log( '全局导航守卫---全局前置守卫');

next();

});

RouterInstance. beforeResolve(( to, from, next) => {

console. log( '全局导航守卫---beforeResolve');

next();

});

RouterInstance. afterEach(( to, from) => {

console. log( '全局导航守卫---全局后置');

});

 

//路由配置导航守卫、

beforeEnter : ( to, from, next) => {

// ...

console. log( '组件路由');

next();

},

、 // 组件内部导航

beforeRouteEnter(to, from, next) {

// ...

// 在渲染该组件的对应路由被confirm前调用

// 组件还没有被创建不能访问this

console. log( "组件内部导航守卫--beforeRouteEnter");

next();

},

beforeRouterUpdate() {

// ...

// 在当前路由改变，但组件被服用的时候调用 可以访问this // 组件更新 mounted函数不会执行。

console. log( "组件内部导航守卫--beforeRouterUpdate");

next();

},

beforeRouteLeave( to, from, next) {

// ...

//导航离开该组建时，路由调用。可以方位this

console. log( "组件内部导航守卫--beforeRouteLeave");

next();

}

 

4， 命名视图

 

< router-view ></ router-view >

< router-view name= "one" ></ router-view >

< router-view name= "two" ></ router-view >

 

{ // 命名视图

path: '/',

components: {

default: Index,

one: One,

two: Two

}

}

 

5，router-link 示例

< router-link to= "/index" >to-index </ router-link >

< router-link to= "/one/123" >to-one </ router-link >

<!--

router-link 默认渲染出来是a标签

tag 指定渲染成什么标签

replace 不会留下history记录，

使用后导航后不能用后退键返回上一个页面

active-class

router-link 对应路由匹配成功时候。会自动添加active-class

-->

< router-link :to="{ name: 'one'}" tag= "button" >to-one-name </ router-link >

< router-link to= "/one" tag= "button" >to-one-tag </ router-link >

< router-link to= "/one/123" replace >to-one-replace </ router-link >

< button @click=" handlerRouter" >通过js跳转路由 </ button >

 

 

handlerRouter() {

/**

* replace 不会向history添加记录，而是替换当前的history

*/

// this.$router.replace("/one/123");

/**

* 类似于 window.history.go();

*/

// this.$router.go(-1);

/**

* 编程式导航

* push() 参数可以是字符串 可以是对象

* replace() 不会添加记录和push使用方法一样

* go() 参数是整数

*/

// this.$router.push("/index");

// this.$router.push({

// path: "/index"

// });

// this.$router.push({

// name: "index"

// });

this. $router. push({

name: "one",

params: { id: 666 }

});

}

 

5，$router 和 $route 的区别 

 

 $ router 是vue-router的实例对象。是Vue的全局对象

  $ route 是一个路由组件的对象，每一个组件都有一个$route;主要包含name,path,params,query等属性

 

转载于:https://www.cnblogs.com/niusan/p/10395764.html