Vue-router[嵌套][动态]

黑日里不灭的light

已于 2022-04-30 19:25:32 修改

阅读量746

点赞数

分类专栏： # Vue 文章标签： vue.js javascript 前端

于 2022-02-12 17:51:01 首次发布

本文链接：https://blog.csdn.net/weixin_46765649/article/details/122897354

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一.Vue-router

1.基础

1.1 设置导向

# 转换为html就是a标签，to指向前端路由
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>

1.2 设置展示内容区域

解释：该代码放置在哪里，调用路由注册的模板就在哪里显示

<router-view></router-view>

1.3 路由配置

解释：component对应模板,在路由里面注册，无需外面再注册


    const Foo={
        template: `11111`
    }
    const Bar={
        template: `11111`
    }
const router = new VueRouter({
  routes: [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]
})

1.4 配置到Vue中

new Vue({
	el:'app',
	router:router
})

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <SCript src="vue2.js"></SCript>
    <script src="vue-router3.js"></script>
</head>

<body>
    <div id="app">
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link><br>
        show in this
        <router-view></router-view>
    </div>
</body>
<script>
    const Foo = {
        template: `<p>123</p>`
    }
    const Bar = {
        template: `<p>66654354345345</p>`
    }
    const router = new VueRouter({
        routes: [
            { path: '/foo', component: Foo },
            { path: '/bar', component: Bar }
        ]
    })
    var app = new Vue({
        'el': '#app',
        router: router
    })



</script>

</html>

2.路由重定向

{ path: '/', redirect: '/foo'}

3.路由嵌套

解释：在该路由下显示其它路由，只需要添加children属性，再在对应模板里面写入导向嵌套内容的router-link和router-view

 const Foo={
        template: `<div>
            <div>1555115</div>
            <hr>
            <router-link to="/foo/zl">A</router-link>
            <router-link to="/foo/zll">B</router-link>
            <router-view></router-view>
        </div>`
    }

const router = new VueRouter({
        routes: [
            { path: '/foo', component: Foo ,children:[
                { path: '/foo/zl', component:FOOA},
                { path:'/foo/zll', component:FOOB}
            	]
            }
        ]
    })

4.动态路由

格式： { path: '/foo/:char', component:FOOA}
获取值：

    const FOOA={
        template: `<div>12222---{{$route.params.char}}</div>`
    }

5.路由参数传递

5.1 props为ture

目的：只去传递动态值
{ path: '/foo/:char', component:FOOA,props:true}

props:['char']
template: `<div>12222---{{char}}</div>`

5.2 props为对象

目的：只去传递普通值
{ path: '/foo/:char', component:FOOA,props:{'name':'jack'}}

props:['name']
template: `<div>12222---{{name}}</div>`

5.3 props为函数

目的：即想传递动态值，又想传递普通值
{ path: '/foo/:char', component:FOOA,props:route=>({'name':'jack','id':route.params.char})}

props:['name','id'],
template: `<div>12222---{{name}}+{{id}}</div>`

6.路由传递数据

6.1子传父

A：

子：this.$emit('confirm', 1)

父：<router-view @confirm='changefor_flag'></router-view>
methods里面写入changefor_flag函数

6.2兄弟跳转传值

A：

兄弟A写跳转

    editor (id) {
      this.$router.push({
        path: '/article/release',
        query: {
          id: id
        }
      })
    }

B：
2. 兄弟B承接

  mounted () {
    console.log(this.$route.query)
  }
  # 关键在this.$route.query

7.命名路由

解释：为了方便表示路由，给路由规则起了个名字，能够更佳方便的去表示
<router-link :to="{name:'go',params:{char:1551}}">B</router-link>#记得加冒号

 { path: '/foo/:char', name:'go',component:FOOA}

8.编程式导航

8.1 跳转

解释：主要用了this.$router.push()

const Foo={
        template: `<div>

            <button @click='gogo'></button>

        </div>`,
        methods:{
            gogo(){
                this.$router.push('/foo/15155151515155')
            }
        }
    }

8.2 前进后退

解释：主要用了this.$router.go(-1) 该参数表示后退一页

    const Foo={
        template: `<div>

            <button @click='gogo'></button>

        </div>`,
        methods:{
            gogo(){
                this.$router.go(-1)
            }
        }
    }

黑日里不灭的light

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-router[嵌套][动态]

一.Vue-router1.基础1.1 设置导向# 转换为html就是a标签，to指向前端路由<router-link to="/foo">Go to Foo</router-link><router-link to="/bar">Go to Bar</router-link>1.2 设置展示内容区域解释：该代码放置在哪里，调用路由注册的模板就在哪里显示<router-view></router-view>1.3
复制链接

扫一扫