Vue教程（六）路由的使用

一路由的使用

1下载vue-router
https://unpkg.com/vue-router/...
使用：直接引入
<script src="vue.js"></script>
<script src="vue-router.js"></script>
2 安装npm包
npm install vue-router
使用：
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(VueRouter)

二路由的配置

静态路由

export default new Router({
  routes: [
  //静态路由
    {
      path: '/Home',    
      name: 'Home',
      component: Home
    },
    { path: '/About',
     name: 'About',
     component: About 
    }, 
    //重定向
    {path:'*',redirect:'/Home'},
   //动态路由
    { path: '/GuanYu/:id',
     name: 'GuanYu',
     component: GuanYu 
    },
  ]
})

html:

<header class="header">
    <div class="header_inner">           
        <div class="header_cont"> 
                    <router-link to="/Home">主页</router-link>
                    <router-link to="/About">详情</router-link>
                    <router-link to="/GuanYu/1">关于1</router-link> 
            <router-link to="/GuanYu/2">关于2</router-link> 
            </div>
    </div>
</header>

< router-link > 默认会被渲染成一个 <a> 标签 >>>to=""为我们定义的路由
< router-view > 路由匹配到的组件将渲染在这里

动态路由
我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个关于的组件，对于所有 ID 各有不同的展示效果，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用『动态路径参数』（dynamic segment）来达到这个效果：
动态路径参数以冒号开头

 { 
path: '/GuanYu/:id',
     name: 'GuanYu',
     component: GuanYu 
  },

<router-link to="/GuanYu/1">关于1</router-link>路由到id为1的组件
<router-link to="/GuanYu/2">关于2</router-link> 路由到id为2的组件

通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由：
使用watch监视路由的变化:

   watch: {/
    '$route' (to, from) {
      // 对路由变化作出响应...  
      console.log("from:");
      console.log(from);//打印from:来源路由
      console.log("------------------------------------------------------------------------------");
      console.log("to:");
      console.log(to);//打印to：目标路由
      console.log("------------------------------------------------------------------------------");
      console.log(this.$route);
    }
   },

在关于这个组件使用 $route.params.id 获取动态参数

如：
<div>User {{ $route.params.id }} </div>

当路由由<router-link to="/GuanYu/1">关于1</router-link>切换到 <router-link to="/GuanYu/2">关于2</router-link>时，会打印出如下图信息：

嵌套路由

 { path: '/About',
     name: 'About',
     component: About ,
     //路由嵌套子路由
     children: [
      {
        path: 'attend',
        component: asd
      },
      {
        path: 'newattend',
        component: sdf
      }
    ]
  }

还需在About组件的模板上加上<router-view>
嵌套路由可以使用多个

注意：在路径上加上‘/’表示从根目录开始跳转
不加‘/’表示从当前页面进行跳转

最后编辑于：2018.04.23 20:34:45

Vue教程（六）路由的使用

一 路由的使用

二 路由的配置

一路由的使用

二路由的配置