江在川上曰：vue-Router学习笔记

vue-Router学习笔记

1.vue-Router

1.1 基本使用步骤

1. 引入相关库文件

   <!-- 1.引入相关的库文件 -->
   <!-- 引入vue库文件 -->
   <script src='./lib/vue.js'></script>
   <!-- 引入vue-router库文件，用于为window对象全局挂载vuerouter构造函数 -->
   <script src="./lib/vue-router_3.0.2.js"></script>
   

2. 添加路由链接router-link

   router-link 是vue中提供的标签，默认会被渲染为a标签。

   • to属性默认会被渲染为href属性
   • to属性默认会被渲染为#开头的hash地址

   <!-- 被vm实例所控制的区域 -->
   <div id='app'>
       <!-- 2.添加路由链接 -->
       <router-link to="/user"></router-link>
       <router-link to="/login"></router-link>
   </div>
   

   定义路由组件

   // 3.定义路由组件
   const User = {
   	template:"<h1>用户管理页面</h1>"
   }
   const Login = {
   	template:"<h1>用户登录页面</h1>"
   }
   

3. 添加路由填充位router-view

   ​ router-view是vue提供的路由填充位，也叫路由占位符。将来通过路由规则匹配到的组件，将会渲染到router-view所在的位置。

   <!-- 4.路由占位符 -->
   <router-view></router-view>
   

4. 配置路由规则并创建路由实例

   每个路由规则都是一个配置对象，其中至少包含path和component两个属性。

   • path：表示当前路由规则匹配的hash地址
   • component：表示当前路由规则对应要展示的组件

   // 5.创建路由实例
   var router = new VueRouter({
   	// routers是路由规则数组
   	routes:[
   
           { path: "/user", component: User },
           { path: "/login", component: Login },
       ]
   })
   

5. 把路由挂载到vue根实例中

   为了使得路由规则生效，必须把路由对象挂载到vue实例对象上。

   // 创建vm实例对象
   var vm = new Vue({
       // 指定控制的区域
       el:'#app',
       data:{
   
       },
       // 挂载路由实例对象
       router:router,
       methods: {
   
       }
   });
   

1.2路由重定向

​ 路由重定向指的是：用户在访问地址A的时候，强制用户跳转到C路径，从而展示特定组件的页面，通过路由规则的redirect属性，指定一个新的路由地址，可以很方便设置路由的重定向。

 // 创建路由实例
 var router = new VueRouter({
     // routers是路由规则数组
     routes: [
         { path: "/", redirect: "/user"},
         { path: "/user", component: User },
         { path: "/login", component: Login },
     ]
 })

1.3.嵌套路由

1.3.1嵌套路由用法

1. 子级路由模板

   定义父组件

   // 4.定义路由组件
   const User = {
   	template: "<h1>用户管理页面</h1>"
   }
   const Login = {
       template: `
       <div>
       <h1>用户登录页面</h1>
       <hr/>
       <!--添加子路由链接 -->
       <router-link to="/login/name">用户管理页面</router-link>
       <router-link to="/login/password">用户登录页面</router-link>
       <!--子路由占位符-->
       <router-view></router-view>
   </div>
   `
   }
   

   定义子组件

   const Tab1 = {
   	template: "<h1>用户账号</h1>"
   }
   const Tab2 = {
   	template: "<h3>用户密码</h3>"
   }
   

2. 添加子组件路由

   // 创建路由实例
   var router = new VueRouter({
       // routers是路由规则数组
       routes: [
           { path: "/", redirect: "/user" },
           { path: "/user", component: User },
           { path: "/login", component: Login,children:[
               {path: "/login/name", component: Tab1},
               {path: "/login/password", component: Tab2}
           ] },
       ]
   })
   

1.3.2动态路由匹配

1. 添加子路由链接

   <!-- 被vm实例所控制的区域 -->
       <div id='app'>
           <!-- 2.添加路由链接 -->
           <router-link to="/user/add">添加用户</router-link>
           <router-link to="/user/edit">修改用户</router-link>
           <router-link to="/user/delete">删除用户</router-link>
           <router-link to="/login">用户登录页面</router-link>
           <!-- 3.路由占位符 -->
           <router-view></router-view>
       </div>
   

2. 添加子路由路径

   // 创建路由实例
   var router = new VueRouter({
       // routers是路由规则数组
       routes: [
           { path: "/", redirect: "/user" },
           { path: "/user/:id", component: User },
           { path: "/login", component: Login,children:[
           {path: "/login/name", component: Tab1},
           {path: "/login/password", component: Tab2}
           ] },
       ]
   })
   

1.3.3带参数的动态路由

​

1. 定义子组件模板

   // 4.定义路由组件
   	const User = {
           props:["name","password"],
           template: "<h1>用户管理页面---{{$route.params.id}}---账号:{{uname}}---密码：{{password}}</h1>"
           }
   

2. 添加子组件路由

   // 创建路由实例
           var router = new VueRouter({
               // routers是路由规则数组
               routes: [
                   { path: "/", redirect: "/user" },
                   { path: "/user/:id", component: User, props:{
                       name:"赵四",
                       password:'1234'
                   } },
                   { path: "/login", component: Login,children:[
                       {path: "/login/name", component: Tab1},
                       {path: "/login/password", component: Tab2}
                   ] },
               ]
           })
   

   还可以这样添加：

    // 创建路由实例
           var router = new VueRouter({
               // routers是路由规则数组
               routes: [
                   { path: "/", redirect: "/user" },
                   { path: "/user/:id", component: User, props:route=>({
                       name:"赵四",
                       password:'1234',
                       id: route.params.id
                   }) },
                   { path: "/login", component: Login,children:[
                       {path: "/login/name", component: Tab1},
                       {path: "/login/password", component: Tab2}
                   ] },
               ]
           })
   

1.4命名路由

​ 首先，要对子组件路由进行定义

<router-link :to="{ name:'user',parmas:'edit'}">修改用户</router-link>
 // 创建路由实例
var router = new VueRouter({
    // routers是路由规则数组
    routes: [
        { path: "/", redirect: "/user" },
        { 
            name:"user",
            path: "/user/:id", 
            component: User, 
            props:route=>({
                name:"赵四",
                password:'1234',
                id: route.params.id
            }) 
        },
        { path: "/login", component: Login,children:[
            {path: "/login/name", component: Tab1},
            {path: "/login/password", component: Tab2}
        ] },
    ]
})

1.5页面导航的两种方式

**声明式导航：**通过点击链接实现导航的方式，叫做声明式导航

<router-link :to="{ name:'user',parmas:'edit'}">修改用户</router-link>

编程式导航：通过调用js形式的API实现导航的方式，叫做编程式导航

this.$router.push("/login")
this.$router.go(-1)

router.push()方法的参数规则

//字符串(路径名称)
router.push("/home")
//对象
router.push({ path:"/home" })
//命名的路由(传递参数)
router.push({ name:"/user",params:{ userId:123 } })
//带查询参数，变成/login?uname=lisi
router.push({ path:"/login",query:{
    uname:"lisi"
}})