Vue-Router（vue路由）

在web开发中，"router"是指根据url分配到对应的处理程序

//vue


//vue-router

npm install vue-router

    
Hello App!
    

        
        
        
        Go to Foo
        Go to Bar
    
    
    
    

注意，如果使用模块化编程。就需要导入vue和VueRouter，在js中调用 Vue.use(VueRouter)

div id="app">
    
Hello App!
    

        Go to Foo

        Go to Bar

        user
        
    
    

JAVASCRIPT

onst Foo = { template: "
foo
" }
    const Bar = { template: "
bar
" }
    const User = {template:`
        

            
user
            {{$route.params.name}}
        
`
    }

    const routes = [
        { path: "/foo", component: Foo },
        { path: "/bar", component: Bar },
        {
            path:"/user",
            component:User,
            children:[
                {
                    path:":name"//动态路径参数以冒号开头
                }
            ]
        }
    ]
    const router = new VueRouter({
        routes
    })
    const app = new Vue({
        el:"#app",
        router
    })

借助 vue-router，使用嵌套路由配置，就可以很简单地表达组件中的层级关系

实际上，在上面的动态路由的例子中就已经使用了嵌套了，定义路由时添加一个　children 属性即可：

const routes=[
    {
        path:"/user",
        component:User,
        children:[
            {
                path:":name",
                component:{
                    template:"
pureview
"
                }
            }
        ]
    }
]

< router-view >标签在模板中会被渲染为一个< a >标签来进行链接，其实，也可以使用 "router.push()" 来实现导航

该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：

// 字符串
router.push("home")

// 对象
router.push({ path: "home" })

// 命名的路由
router.push({ name: "user", params: { userId: 123 }})

// 带查询参数，变成 /register?plan=private
router.push({ path: "register", query: { plan: "private" }})

跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

// 后退一步记录，等同于 history.back()
router.go(-1)

// 前进 3 步记录
router.go(3)

// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)

路由组件是可以进行命名的，在执行链接或者跳转页面时就会比较方便。命名的方式也很简单，给routes一个name属性就OK了

var router=new VueRouter({
    routes:[
        {
            path:"/home",
            name:"homePage",
            component:Home
        }
    ]
})

要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象：

Home

有时候想同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar（侧导航） 和 main（主内容） 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个多带带命名的视图，而不是只有一个多带带的出口。如果 router-view 没有设置名字，那么默认为 default。

HTML

    

        
视图一
        
    
    

        
视图二
        
    

JAVASCRIPT

var Foo={
    template:"
内容一
"
}
var Bar={
    template:"
内容二
"
}
var routes=[
    {
        path:"/",
        components:{
            one:Foo,
            two:Bar
        }
    }
]
var router=new VueRouter({
    routes
})

重定向的意思就是当你访问 a 的时候，url 会被替换为 b ，于是匹配路由 b

重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b：

var router=new VueRouter({
    routes:[
        {
            path:"/a",
            redirect:"/b"
        }
    ]
})

意思就是当我们访问 b 的时候，路由匹配为 a ，但是url地址不变

var router=new VueRouter({
    routes:[
        {
            path:"/a",
            alias:"/b"
        }
    ]
})

vue-router 提供的导航钩子主要用来拦截导航，让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子：全局的, 单个路由独享的, 或者组件级的。

你可以使用 router.beforeEach 注册一个全局的 before 钩子：

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

钩子函数的三个参数：

to: Route: 即将要进入的目标 路由对象

from: Route: 当前导航正要离开的路由

next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。

next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。

next("/") 或者 next({ path: " / " }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。

做一个小例子：

做了一个简单的页面，设定了一个登陆状态，如果 isLogin 为false，那么点击账户中心，则跳转到登陆页进行登陆

如果 isLogin 为true，则显示账户中心的内容：

钩子函数代码

router.beforeEach((to, from, next) => {
    var isLogin = true ;
    if(to.path == "/user"&&!isLogin){
        next("/login")
    }else{
        next();
    }
})

贴上完整代码大家可以直接复制试一试

    

        首页
        关于我们
        账户中心
        登录
    
    

定义路由的时候可以配置 meta 字段：

const router = new VueRouter({
  routes: [
    {
      path: "/foo",
      component: Foo,
      children: [
        {
          path: "bar",
          component: Bar,
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

那么如何访问这个 meta 字段呢？

首先，我们称呼 routes 配置中的每个路由对象为 路由记录。路由记录可以是嵌套的，因此，当一个路由匹配成功后，他可能匹配多个路由记录。

例如，根据上面的路由配置，/foo/bar 这个 URL 将会匹配父路由记录以及子路由记录。

一个路由匹配到的所有路由记录会暴露为 $route 对象（还有在导航钩子中的 route 对象）的 $route.matched 数组。因此，我们需要遍历 $route.matched 来检查路由记录中的 meta 字段。

下面例子展示在全局导航钩子中检查 meta 字段：

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 此路由需要验证，检查是否登录
    // 如果不需要，则重定向到登录页面。
    if (!auth.loggedIn()) {
      next({
        path: "/login",
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // 确保一定要调用 next()
  }
})