vuerouter高版本问题（Vue-Router面试题之异域）

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌，路由模块的本质，就是建立起url和页面之间的映射关系。包含的功能有：

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的 CSS class 的链接
• HTML5 历史模式或 hash 模式，在 IE9 中自动降级
• 自定义的滚动条行为

SPA：single page application 单一页面应用程序，即应用只有一个完整的页面。它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容，比如Gmail、移动的webApp。

工作原理：

1. 解析地址栏，包括完整的页面地址、路由地址。
2. 根据路由地址从路由词典中找到真正的要加载的页面。
3. 发起ajax请求，请求要加载的页面。
4. 向指定的容器中，插入加载来的页面。

专业术语：

router路由器

route路由

routes 路由数组（路由词典）

1.引入vue.js vue-router.js。

2.指定一个容器。

<router-view></router-view>

3.创建业务所需要用到的组件类。

var MyLogin = Vue.component()

4.配置路由词典。

const myRoutes = [

{path:'',component:MyLogin},

{path:'/login',component:MyLogin}

];

const myRouter = new VueRouter({

routes:myRoutes

})

new Vue({

router:myRouter

})

5.测试

修改地址栏中的路由地址，测试看加载的组件是否正确。

注意事项：

1.先引入vue，再引入插件

2.一定要指定router-view

3.route路由 {path:'',component:}

routes 路由数组 []

router 路由器:按照指定的路由规则去访问对应的组件 new VueRouter

---

03 使用路由模块来实现页面跳转的方式

方式1：直接修改地址栏

方式2：js

this.$router.push(‘路由地址’);

方式3：link标签

<router-link to="路由地址"></router-link>

---

04 完成参数的传递

在页面之间跳转的时候，在有些场景下，需要同时指定参数

1.明确发送方和接收方

list --20--> detail

发送方是一个list，用户点击id，跳转到detail

2.配置接收方的路由地址

路由词典：/detail --> /detail/:index

js通过this.$route.params.index访问参数。

3.发送

<router-link to="/detail/20"></router-link>

或

this.$router.push('/detail/20')

---

05 路由嵌套

在一个路由中，path对应一个component，如果这个component需要根据不同的url再加载其他的component，称之为路由的嵌套

举例：比如A组件现在需要根据不同的url，加载B组件或者C组件

1.给A组件指定一个容器

<router-view></router-view>

2.配置路由词典

{

path:'/a',

component:A,

children:[

{path:'/b',component:B}

]

}

需求：现在有两个组件，分别是login/mail,建立SPA。在此基础上，希望mail组件 嵌套inbox/outbox/draft

补充：在设置子路由，路由匹配规则依然是适用的，只不过路由地址为空和异常，要携带父组件的路由地址

/mail /mail/draft

---

06 异域面试题

1.active-class是哪个组件的属性？

vue-router模块的router-link组件。

2.嵌套路由怎么定义？

在 VueRouter 的参数中使用 children 配置，这样就可以很好的实现路由嵌套。

//引入两个组件

import home from "./home.vue"

import game from "./game.vue" //定义路由

const routes = [

{ path: "/", redirect: "/home" },//重定向,指向了home组件

{

path: "/home", component: home,

children: [

{ path: "/home/game", component: game }

]

}

]

3.怎么定义vue-router的动态路由？怎么获取传过来的动态参数？

在router目录下的index.js文件中，对path属性加上/:id。

使用router对象的params.id。

4.vue-router有哪几种导航钩子？

三种，

第一种：是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。

第二种：组件内的钩子

第三种：单独路由独享组件

5、vue-router是什么？它有哪些组件？

vue用来写路由的一个插件。组件包括router-link、router-view

6、(webpack)vue-cli构建的项目如何设置每个页面的title？

在路由里每个都添加一个meta

[{

path:'/login',

meta: {

title: '登录页面'

},

component:'login'

}]

钩子函数：

在main.js中添加如下代码

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

window.document.title = to.meta.title;

next()

})

7、导航钩子有哪些？它们有哪些参数？

导航钩子有：

全局钩子

beforeEach

当一个导航触发时，全局前置钩子按照创建顺序调用。钩子是异步解析执行，此时导航在所有钩子 resolve 完之前一直处于等待中。

全局解析钩子

beforeResolve

在导航被确认之前，同时在所有组件内钩子和异步路由组件被解析之后，解析钩子就被调用。

全局后置钩子

afterEach

这些钩子不会接受 next 函数也不会改变导航本身

路由独享钩子

beforeEnter

组件内钩子

beforeRouteEnter

beforeRouteUpdate (2.2 新增)

beforeRouteLeave

参数：

有to（去的那个路由）、from（离开的路由）、next（一定要用这个函数才能去到下一个路由，如果不用就拦截）最常用就这几种

完整的导航解析流程

1. 导航被触发。
2. 在失活的组件里调用离开钩子。
3. 调用全局的 beforeEach 钩子。
4. 在重用的组件里调用 beforeRouteUpdate 钩子 (2.2 )。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 钩子 (2.5 )。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 用创建好的实例调用 beforeRouteEnter 钩子中传给 next 的回调函数。

8、vue项目中在使用vue-router切换页面的时候滚动条怎样自动滚动到顶部？

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。

注意: 这个功能只在 HTML5 history 模式下可用。

当创建一个 Router 实例，你可以提供一个 scrollBehavior 方法：

const router = new VueRouter({

routes: [...],

scrollBehavior (to, from, savedPosition) {

// return 期望滚动到哪个的位置

}

})

scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。

这个方法返回滚动位置的对象信息，长这样：

{ x: number, y: number }

{ selector: string, offset? : { x: number, y: number }} (offset 只在 2.6.0 支持)

如果返回一个 falsy 的值，或者是一个空对象，那么不会发生滚动。

举例：

scrollBehavior (to, from, savedPosition) {

return { x: 0, y: 0 }

}

对于所有路由导航，简单地让页面滚动到顶部。

返回 savedPosition，在按下 后退/前进 按钮时，就会像浏览器的原生表现那样：

scrollBehavior (to, from, savedPosition) {

if (savedPosition) {

return savedPosition

} else {

return { x: 0, y: 0 }

}

}

如果你要模拟『滚动到锚点』的行为：

scrollBehavior (to, from, savedPosition) {

if (to.hash) {

return {

selector: to.hash

}

}

}

我们还可以利用路由元信息更细颗粒度地控制滚动。

routes: [

{ path: '/', component: Home, meta: { scrollToTop: true }},

{ path: '/foo', component: Foo },

{ path: '/bar', component: Bar, meta: { scrollToTop: true }}

]

完整的例子：

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

const Home = { template: '<div>home</div>' }

const Foo = { template: '<div>foo</div>' }

const Bar = {

template: `

<div>

bar

<div style="height:500px"></div>

<p id="anchor">Anchor</p>

</div>

`

}

// scrollBehavior:

// - only available in html5 history mode

// - defaults to no scroll behavior

// - return false to prevent scroll

const scrollBehavior = (to, from, savedPosition) => {

if (savedPosition) {

// savedPosition is only available for popstate navigations.

return savedPosition

} else {

const position = {}

// new navigation.

// scroll to anchor by returning the selector

if (to.hash) {

position.selector = to.hash

}

// check if any matched route config has meta that requires scrolling to top

if (to.matched.some(m => m.meta.scrollToTop)) {

// cords will be used if no selector is provided,

// or if the selector didn't match any element.

position.x = 0

position.y = 0

}

// if the returned position is falsy or an empty object,

// will retain current scroll position.

return position

}

}

const router = new VueRouter({

mode: 'history',

base: __dirname,

scrollBehavior,

routes: [

{ path: '/', component: Home, meta: { scrollToTop: true }},

{ path: '/foo', component: Foo },

{ path: '/bar', component: Bar, meta: { scrollToTop: true }}

]

})

new Vue({

router,

template: `

<div id="app">

<h1>Scroll Behavior</h1>

<ul>

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

<li><router-link to="/foo">/foo</router-link></li>

<li><router-link to="/bar">/bar</router-link></li>

<li><router-link to="/bar#anchor">/bar#anchor</router-link></li>

</ul>

<router-view class="view"></router-view>

</div>

`

}).$mount('#app')

网友说还可以试试在main.js入口文件配合vue-router写这个

router.afterEach((to,from,next) => {

window.scrollTo(0,0);

});

,