Vue Router 是 Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

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

把 Vue Router 添加进来,将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们

以下是一个基本的实例来写一个简单的页面

  1 <!DOCTYPE html>
  2 <html lang="zh-CN">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <meta name="viewport" content="width=device-width, initial-scale=1">
  7 </head>
  8 <body>
  9 <div id="app">
 10 
 11 </div>
 12 <script src="vue.js"></script>
 13 <script src="vue-router.js"></script>
 14 <script>
 15     //如果以后是模块化编程，Vue.proptotype.$VueRouter = VueRouter
 16     //    Vue.use(VueRouter)
 17     const Home = {
 18         data() {
 19             return {}
 20         },
 21         template: `<div>我是首页</div>`
 22     }
 23     const Course = {
 24         data() {
 25             return {
 26                 categoryList:[]
 27             }
 28         },
 29         template: `<div>
 30         <span v-for = '(item,index) in categoryList'>{{item.name}}</span>
 31 
 32 
 33 
 34     </div>`,
 35         methods:{
 36           getCategroyList(){
 37 
 38           }
 39         },
 40         created(){
 41             //ajax 发送请求 数据获取
 42             this.getCategroyList();
 43         }
 44     }
 45     //创建路由
 46     const router = new VueRouter({
 47         //定义路由规则
 48         routes: [
 49             {
 50               path:'/',
 51               redirect:'/home'
 52             },
 53             {
 54                 path: '/home',
 55                 name:'Home',
 56                 component: Home
 57             },
 58             {
 59                 path: '/course',
 60                 name:'Course',
 61                 component: Course
 62             }
 63         ]
 64     })
 65     let App = {
 66         data() {
 67             return {}
 68         },
 69 //        router-link和router-view 是vue-router 提供的两个全局组件
 70         //router-view  是路由组件的出口
 71         template: `
 72             <div>
 73 
 74                 <div class="header">
 75                     <router-link :to = '{name:"Home"}'>首页</router-link>
 76                     <router-link :to = '{name:"Course"}'>免费课程</router-link>
 77                 </div>
 78                 <router-view></router-view>
 79             </div>
 80 
 81         `
 82 
 83     }
 84     new Vue({
 85         el: '#app',
 86         //挂载 路由对象
 87         router,
 88         data() {
 89             return {}
 90         },
 91         template: `<App />`,
 92         components: {
 93             App
 94         }
 95     })
 96 
 97 </script>
 98 
 99 </body>
100 </html>
View Code

 

在这里面需要注意的是:

　　1,如果使用模块化变成,我们需要在开始加上Vue.use(VueRouter)

　　2,创建路由: 可以给路由起名字,起名之后在全局组建中的使用方式为:  <router-link :to = '{name:"Home"}'>首页</router-link>

 

 1  const router = new VueRouter({
 2         //定义路由规则,每个路由都映射一个组件
 3         routes: [
 4             {
 5               path:'/',
 6               redirect:'/home'
 7             },
 8             {
 9                 path: '/home',
10                 name:'Home',
11                 component: Home
12             },
13             {
14                 path: '/course',
15                 name:'Course',
16                 component: Course
17             }
18         ]
19     })

 

 

　　3,　　<router-link to = '/home'>首页</router-link>

　　　　   <router-link to = '/course'>免费课程</router-link>

　　　　   <router-view></router-view>

　　  router-link 和 router-view 是vue-router 提供的两个全局组件

　　　router-view 是路由组件的出口

　　4,要挂载路由对象

 1 new Vue({
 2         el: '#app',
 3         //挂载 路由对象
 4         router,
 5         data() {
 6             return {}
 7         },
 8         template: `<App />`,
 9         components: {
10             App
11         }
12     })

 动态路由的匹配

我们经常需要把某种模式的匹配到所有路由,全都映射到同个组件,例如,我们有一个User组件,对于所有ID各不同的用户,都要使用这个组件来渲染,那么我们可以在路由路径中使用动态路由参数来达到效果,

 

const User = {
        data() {
            return {
                user_id:null
            }
        },
        template: `<div>我是用户{{ user_id}}</div>`,
        created() {
            console.log(this.$route); //路由信息对象
//            提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。
        },
　　　　//复用的组件 监听路由的变化
        watch: {
            '$route'(to, from) {
                // 对路由变化作出响应...
                console.log(to.params.id);
                console.log(from);
                this.user_id = to.params.id;
                //发送ajax
　　　　　　　　　to  //要进入的页面的路由信息对象
        　　　　from  //从哪个路由信息对象中来

            }
        }
    }

    //创建路由
    const router = new VueRouter({
        //定义路由规则
        routes: [

            {  //动态路径参数 以冒号开头
                path: '/user/:id',
                name: 'User',
                component: User
            }

        ]
    })
    let App = {
        data() {
            return {}
        },
//        router-link和router-view 是vue-router 提供的两个全局组件
        //router-view  是路由组件的出口
        template: `
            <div>

                <div class="header">
                                                 //动态路由模板中写法
                    <router-link :to = '{name:"User",params:{id:1}}'>用户1</router-link>
                    <router-link :to = '{name:"User",params:{id:2}}'>用户2</router-link>

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

        `

    }

 

 

编程式导航

 

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

注意：在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。

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

当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)

 1  template: `<div>我是用户{{ user_id}}
 2                            //设置点击事件
 3                     <button @click = 'clickHandler'>跳转首页</button>
 4 
 5                  </div>`,
 6         created() {
 7             console.log(this.$route);
 8         },
 9         methods:{
10             //编程式导航
11             clickHandler(){
12                //点击跳转首页的时候会跳转到首页/hone路径
13                 this.$router.push({
14                     name:"Home"
15                 })
16             }
17         },