Vue-Router

VUE vue-router
创建时间:
字数:1.4k 阅读:
  1. 什么是router

什么是router

Vue Router是官方的路由管理组件，通过根据不同的hash请求路径，切换不同component进行渲染

  1. 安装

    npm install vue-router

  2. 引入vue-router.js
    1
    2
    <script src="node_modules/vue/dist/vue.js"></script>
    <script src="node_modules/vue-router/dist/vue-router.js"></script>
    举例： demo.html
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    <body>
        <div id="app">
            <div class="header">
                <h1>头部</h1>

            </div>
            <div class="left">
                <p>
                    <ul>
                        <li><a href="#/foo">Go Foo</a> </li>
                        <li><a href="#/boo">Go bar</a> </li>
                        <!-- router-link 是官方提供的组件，通过to指定路径，最后渲染的效果
                            和上面一样
                        -->
                        <li><router-link to="/foo">Go Foo</router-link></li>
                        <li><router-link to="/boo">Go Bar</router-link></li>
                    </ul>
                </p>
            </div>
            <div class="main">
            <!--路由入口-->
                <router-view></router-view>
            </div>
        </div>
        <script src="node_modules/vue/dist/vue.js"></script>
        <script src="node_modules/vue-router/dist/vue-router.js"></script>
        <script >
            1.<!--定义组件-->
            const Foo = {template:'<div>i am foo</div>'}
            const Boo = {template:'<div>i am boo</div>'}
            2.// 定义路由
            const router = new VueRouter({
                routes:[
                    {path:'/foo', component: Foo},
                    {path:'/boo', component: Boo},
                ]
            })

            // 将路由注入到实例
            const app = new Vue({
                el: '#app',
                router
            })
        </script>
    </body>
    • router-link
      用于支持路由导航，常用属性如下：
    • to： 指定一个url 比如’/user’,可以带查询参数，比如
      1
      2
      3
      <router-link :to="{ path: 'register', query: { plan: 'private' }}"
        >Register</router-link
      >
    • tag：渲染后的标签，默认是’a’标签，
    • active-class: 设置连接激活时使用的css样式
    • exact： “是否激活”默认类名的依据是包含匹配

  • 嵌套路由

    • 通过children属性指定子路由，实例如下：
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
          ;(function () {
          window.router = new VueRouter({
              linkActiveClass:'active',
              routes:[
                  {path:'/',component:AppHome},
                  {
                      path:'/news',
                      component:News,
                      // 通过children指定
                      children:[
                          {path:'/news/sport',component:Sport},
                          //简写方式，相对地址"/news",等价于'/news/tech/'
                          {path:'tech',component:Tech},
                          //用于定义默认子路由，重定向
                          {path:'',redirect:'/news/sport'},
                      ]
                  },
                  {path:'/about',component:About}
              ]
          })
      })()

  • keep-alive

    • 路由默认在切换之后就会销毁掉，输入框内的数据就会丢失，通过添加缓存可以保持默认路由，在路由入口处添加
      1.8
      1
      2
      3
      4
      5
      6
      <keep-alive>
              <router-view>
                  <h1 slot="dashboard" class="page-header">{{title}}</h1>
              </router-view>
              
              </keep-alive>

  • 路由嵌套实例二

router.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
;(function () {
    window.router = new VueRouter({
        linkActiveClass:'active',
        routes:[
            {path:'/',component:AppHome},
            {
                path:'/news',
                component:News,
                // 通过children指定
                children:[
                    {
                        path:'/news/sport',
                        component:Sport,
                        children: [
                            {
                                path:'detail/:id',//:id是路径占位符，通过$route.params.id可获取此参数
                                component:SportDetail
                            }
                        ]
                    },
                    //简写方式，相对地址"/news",等价于'/news/tech/'
                    {path:'tech',component:Tech},
                    //用于定义默认子路由，重定向
                    {path:'',redirect:'/news/sport'},
                ]
            },
            {path:'/about',component:About}
        ]
    })
})()

sport.js

1.8
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
;(function () {
    const template = ` <!--体育栏目-->
		<div>
			<ul>
				<li v-for="(sport,inx) in sportAttr" :key="sport.id">
					<!--<a href="#">{{sport.title}}</a>
					注意 to是JS表达式，就需要用v-bind绑定，to属性，
					不要少了单引号，因为前面的路径是字符串
					-->
					<router-link :to="'/news/sport/detail/'+sport.id">{{sport.title}}</router-link>
				</li>
			</ul>
			<!--详情-->
			<router-view></router-view>
			
		</div> `
    window.Sport = {
        template,
        created(){
           this.getSportAttr()
        },
        data(){
           return {
               sportAttr:[]
           }
        },
        methods:{
           getSportAttr(){
               axios.get('db/sport.json')
                   .then(respons => {
                       this.sportAttr = respons.data
                   })
                   .catch(error => {
                       alert(error.message)
                   })
           }
        }
    }
})()

  • 声明式路由、编程式路由

    • 声明式 ：”“,”location.href=”””

    • 编程式: router.push()

      1
      2
      3
      4
      5
      6
      7
      API
       this.$router.push(path) 相当于点击路由连接（可以后退到上个连接）
       this.$router.replace(path) 新路由代替当前路由（不可以跳到上个连接）
       this.$router.back() 后退一步
       this.$router.go(n) 前进n步
       this.$router.go(1)
       this.$router.go(-1) 后退一步

    • 实例

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
        // tech.js
        ;(function () {
       const template = `  <!--科技栏目-->
      <div>
      	<ul >
      		<li v-for="(item,inx) in techArr" :key="item.id">
      			<span>{{item.title}} </span>
      			<button @click='pushTech(item.id)' class="btn  btn-default btn-xs">查看(Push)</button>&nbsp;
      			<button @click='replaceTech(item.id)' class="btn btn-default btn-xs">查看(replace)</button>
      		</li>
      	</ul>
      <button @click="$router.go(-1)">后退</button>
      <button @click="$router.go(1)">前进</button>
      	<!--详情-->
      	<router-view></router-view>
      </div>`
        window.Tech = {
           template,
            data(){
               return {
                   techArr:[]
               }
            },
            created(){
               this.getTechArr()
            },
            methods:{
               getTechArr(){
                   axios.get('db/tech.json')
                       .then(respons => {
                           this.techArr = respons.data
                       })
                       .catch(error => {
                           alert(error.message)
                       })
               },
                pushTech(id){
                   // ${id}是es6语法,push方法可以退回上次地址
                   this.$router.push(`/news/tech/detail/${id}`)
                },
                replaceTech(id){
                   //
                   this.$router.replace(`/news/tech/detail/${id}`)
                }
            }
        }
        })()
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
       // TechDetail.js
       ;(function () {
       template = `
       <div class="jumbotron">
      	<h2>{{detail.title}}</h2>
      	<p>{{detail.content}}</p>
      </div>
       `
       window.techDetail = {
           template,
           data(){
               return{
                   cur_id: this.$route.params.id - 0,
                   detail: {}
               }
           },
           created(){
               this.getDetail()
           },
           methods:{
               getDetail(){
                   this.cur_id = this.$route.params.id - 0
                   axios.get('db/tech.json')
                       .then(respons => {
                           this.detail = respons.data.find(item =>  {
                               return item.id == this.cur_id
                           })
                       })
                       .catch(error=>{
                           alert(error.msg)
                       })
               }
           },
           watch:{
               "$route":function () {
                   this.getDetail()
               }
           }
       }
       })()
转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 jaytp@qq.com

赏

文章标题:Vue-Router

文章字数:1.4k

本文作者:Aaron

发布时间:2020-01-11, 12:14:37

最后更新:2020-01-18, 00:14:38

原始链接:http://blog.linuxerbulo.com/2020/01/11/Vue-Router/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

©2019-2020 Aaron

Built with Hexo and 3-hexo theme

目录
×

喜欢就点赞,疼爱就打赏