当前位置 > it书童 > vue > 正文

Vue Router 入门

vue it书童 2020-03-03 15:00:58 0赞 0踩 204阅读 0评论

Vue Router 简介

Vue Router 是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器

Vue Router 和 Vue.js 非常契合,可以一起方便的实现 SPA(single page web application,单页应用程序) 应用程序的开发。

Vue Router依赖于Vue,所以需要先引入Vue,再引入Vue Router

Vue Router的特性:

支持H5历史模式或者hash模式
支持嵌套路由
支持路由参数
支持编程式路由
支持命名路由
支持路由导航守卫
支持路由过渡动画特效
支持路由懒加载
支持路由滚动行为

Vue Router的使用步骤

导入js文件

<script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/3.1.3/vue-router.min.js"></script>

添加路由链接

<router-link> 是路由中提供的标签,默认会被渲染为a标签,to属性默认被渲染为href属性,

to 属性的值会被渲染为 # 开头的hash地址

<router-link to="/user">User</router-link>
<router-link to="/login">Login</router-link>

添加路由填充位(路由占位符)

<router-view></router-view>

定义路由组件

let User = { template: '<div>This is user</div>' }
let Login = { template: '<div>This is login</div>' }

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

let myRouter = new VueRouter({
    // 定义路由规则数组
    routes: [
        // 每个路由规则都是一个对象,至少包含 path 和 component 两个属性
        { path: '/user', component: User },
        { path: '/login', component: Login }
    ]
})

将路由挂载到Vue实例中

// 将路由挂载到 vue 实例
const vm = new Vue({
    el: '#app',
    router: myRouter
}

Vue Router 的使用步骤总结

  • A.导入js文件

  • B.添加路由链接

  • C.添加路由占位符(最后路由展示的组件就会在占位符的位置显示)

  • D.定义路由组件

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

  • F.将路由挂载到Vue实例中

路由重定向:可以通过路由重定向为页面设置默认展示的组件 在路由规则中添加一条路由规则即可,如下:

routes: [
    // 每个路由规则都是一个对象
    { path: '/', redirect: '/user' },
    { path: '/user', component: User },
    { path: '/login', component: Login }
]

嵌套路由

当我们进行路由的时候显示的组件中还有新的子级路由链接以及内容。

嵌套路由最关键的代码在于理解子级路由的概念:比如我们有一个/login的路由 那么/login下面还可以添加子级路由 如:

  • /login/account

  • /login/phone

参考代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/3.1.3/vue-router.min.js"></script>
    <title>Document</title>
</head>
<body>
   <div id="app">
       <router-link to="/user">user</router-link>
       <router-link to="/login">login</router-link>
       <router-view></router-view>
   </div> 
</body>
<script>
    let User = { template: '<div>This is user</div>' }
    // login 组件中的模板代码包含了子级路由链接及子级路由的占位符
    let Login = { template: `<div>
        <h1>This is login</h1>
        <hr>
        <router-link to="/login/account">账号密码登录</router-link>
        <router-link to="/login/phone">扫码登录</router-link>
        <!-- 子路由将会在 router-view 中显示 -->
        <router-view></router-view>
    </div>` }

    // 定义子级路由组件
    let account = { template: "<div>账号:<input><br>密码:<input></div>" }
    let phone = { template: "<h1>扫我二维码<br><img src='https://image-1253761983.picgz.myqcloud.com/2020-01-15-reward.png?imageView2/2/w/600/q/100'></h1>" }

    let myRouter = new VueRouter({
        // 定义路由规则数组
        routes: [
            { path: '/', redirect: '/user' },
            { path: '/user', component: User },
            { 
                path: '/login', 
                component: Login ,
                // 通过 children 属性为 /login 添加子路由规则
                children: [
                    { path: "/login/account", component: account },
                    { path: "/login/phone", component: phone },
                ]
            }
        ]
    })

    // 将路由挂载到 vue 实例
    const vm = new Vue({
        el: '#app',
        router: myRouter
    })
</script>
</html>

页面效果大致如下:

动态路由匹配

let User = { template: "<div>用户:{{ $route.params.id }}</div>" }
// ...
routes: [
  { path: '/user/:id', component: User },
  // ...
]

image-20200115161624720

如果使用 $route.params.id 来获取路径传参的数据不够灵活。

1.我们可以通过props来接收参数

let User = { 
  props: ['id'],
  template: "<div>用户:{{ id }}</div>" 
}
routes: [
  // 如果 props 设置为 true, route.params 将会被设置为组件属性
  { path: '/user/:id', component: User, props: true },
  // ...
]

2.还有一种情况,我们可以将props设置为对象,那么就直接将对象的数据传递给组件进行使用

let User = { 
  props: ['username', 'pwd'],
  template: "<div>用户:{{ username }} -- {{ pwd }}</div>" 
}

// 如果 props 设置为对象,则将对象中的数组传递给组件
{ path: '/user/:id', component: User, props: { username: 'jack', pwd: 123} },

3.如果想要获取传递的参数值还想要获取传递的对象数据,那么props应该设置为函数形式

let User = { 
  props: ['username', 'pwd', 'id'],
  template: "<div>用户:{{ id }} -> {{ username }} -- {{ pwd }}</div>" 
}

// 如果 props 设置为函数,则可以通过函数的第一个参数获取路由对象,进而获取路由的 params 属性传递的参数
{ 
  path: '/user/:id', 
    component: User, 
      props: (route) => {
        return { username: 'jack', pwd: 123, id: route.params.id }
      }
},

命名路由:给路由取别名

// 通过 name 属性为路由添加一个别名
{ 
  path: '/user/:id', 
  component: User, 
  name: 'user'
},

添加了别名之后,可以使用别名进行跳转

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

还可以编程式导航

myRouter.push({ name: 'user', params: {id: 123}})

编程式导航

页面导航的两种方式:

  • A.声明式导航:通过点击链接的方式实现的导航

  • B.编程式导航:调用js的api方法实现导航

Vue-Router中常见的导航方式:

this.$router.push("hash地址");
this.$router.push("/login");
this.$router.push({ name:'user' , params: {id:123} });
this.$router.push({ path:"/login" });
this.$router.push({ path:"/login",query:{username:"jack"} });

this.$router.go( n );//n为数字,参考history.go
this.$router.go( -1 );
转载须注明出处:https://www.itshutong.com/articles/481/getting-started-with-vue-router
标签: vue 路由
关于我
一个文科出身的程序员,追求做个有趣的人,传播有价值的知识,微信公众号主要分享读书思考心得,不会有代码类文章,非程序员的同学请放心订阅
发表评论
我有句话,不知当讲不当讲?
要讲之前请先 登录