Vue路由

Vue-router(路由)

安装

CDN引入(非打包)：

<script src="https://unpkg.com/vue/dist/vue.js"></script>  
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>  

NPM安装(打包)：

npm install vue-router  

开始使用

在使用Vue.js的时候，我们通过组合组件来组成应用程序，现在我们要把vue-router添加进来，只需要将组件（components）映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。

div id="app">
    <h1>Hello App!</h1>
    <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/" exact>Go to Home</router-link>
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>
<script>
    // 1. 定义（路由）组件。
    const Home={template:'<div>home</div>'}
    const Foo={template:'<div>foo</div>'}
    const Bar={template:'<div>bar</div>'}

    // 2. 定义路由
    const routes=[
        {path:'/',component:Home},
        {path:'/foo',component:Foo},
        {path:'/bar',component:Bar},
    ];
    
    // 3. 创建 router 实例，然后传 `routes` 配置
    const router=new VueRouter({
        routes
    })

    // 4. 创建和挂载根实例。
    new Vue({
        el:"#app",
        data:{
            msg:"hello World"
        },
        router
    });
</script>  

动态路由

例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用『动态路径参数』（dynamic segment）来达到这个效果：

div id="app">
    <h1>Hello App!</h1>
    <p>
        <router-link to="/foo">Go to Foo</router-link><br/>
        <router-link to="/bar">Go to Bar</router-link><br/>
        <router-link to="/user">user</router-link>
        
    </p>
    <router-view></router-view>
</div>

<script>
    const Foo = { template: '<div>foo</div>' }
    const Bar = { template: '<div>bar</div>' }
    const User = {template:`
        <div>
            <h2>user</h2>
            {{$route.params.name}}
        </div>`
    }
    
    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
    })  
</script>   

嵌套路由

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

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

const routes=[
    {
        path:'/user',
        component:User,
        children:[
            {
                path:':name',
                component:{
                    template:'<div>pureview</div>'
                }
            }
        ]
    }
]  

编程式导航

除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

router.push(location)

想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

<router-link :to="..."> 等同于调用 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' }})  

<div id="app">
    <input value="按钮" type="button" v-on:click="btn">
</div>

<script>
    new Vue({
        el:'#app',
        methods:{
            btn:function(){
                router.push('/user')
            }
        }
    })
</script>  

router.replace(location)

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

router.go(n)

这个方法的参数是一个整数，意思是在 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)  

命名路由

有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})  

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

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>  

命名视图

有时候想同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar（侧导航） 和 main（主内容） 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。 一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置（带上 s）：

<router-view name:"a"></router-view>
<router-view name:"b"></router-view>  
var routes=[
            
    components:{
        a:{template:"<div>首页,...</div>"},
        b:{template:"<div>内容部分。。。。</div>"},
    }


];  

重定向别名

重定向的意思就是当你访问 a 的时候，url 会被替换为 b ，于是匹配路由 b
重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b：

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

/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。

进阶

导航钩子

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

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

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

钩子函数的三个参数：

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

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

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

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

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

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

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

<div id="app">

    <router-link :to="{name:'home'}">首页</router-link>
    <router-link to="/about">关于我们</router-link>
    <router-link to="/login">登录</router-link>
    <router-link to="/usercenter">账户中心</router-link>
    <router-link to="/usercenter/pwd">密码管理</router-link>

    <router-view></router-view>
</div>

<script>

    var routes=[
        {name:"home",path:'/',component:{template:"<div>首页</div>"}},
        {name:"about", path:'/about',component:{template:"<div>关于我们</div>"}},
        {path:"/gy",redirect:"/about"},
        {
            path:"/usercenter",
            component:{
                template:"<div>个人用户中心<router-view></router-view></div>"
            },
            children:[                    pwd:{
                    path:"pwd",
                    compnent:{
                        template:"<div>密码管理</div>"
                    }
                }
            ]
        },
        {path:'/login',component:{template:"<div>登录</div>"}}
    ];
    var router=new VueRouter({
        
        routes
    });
    router.beforEach((to,from,next)=>{
        var isLogin=false;

        var res=to.matched.some(item=>{
            if(item.path.indexOf("/usercenter")>-1){
                return true;
            }
        })
        if(res&&!isLogin){
            next("/login");
        }else{
            next();
        }
    });
    new Vue({
        el:"#app",
       router
    });
</script>  

路由元信息

定义路由的时候可以配置 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()
  }
})