vue-router路由基础

栏目: JavaScript · 发布时间: 5年前

内容简介:1.1 引入路由文件1.2 准备路由需要的组件1.3 创建路由对象, 在这个对象里面配置路由规则

效果类似掘金导航, 导航切换

vue-router路由基础
vue-router路由基础

1.1 引入路由文件

<script src="./vue-router.js"></script>
复制代码

1.2 准备路由需要的组件

var index = Vue.component('index',{
    template:'<div>首页</div>'
})
var productType = Vue.component('productType',{
    template:'<div>这里显示商品编号</div>'
})
复制代码

1.3 创建路由对象, 在这个对象里面配置路由规则

const router = new VueRouter({

})
复制代码

1.4 通过routes属性配置路由规则,

他是一个数组, 数组中放的是对象, 每个对象对应一条规则, ​

并且每个对象里面都含有name(表示路由规则名称)/path(表示路径)/component(表示路径对应的组件)属性

const router = new VueRouter({
    routes:[
        {name:'index', path:'/index', component:index},
        {name:'productType', path:'/product_type', component:productType}
    ]
})
复制代码

1.5 在vue实例中注入路由, 这样整个应用程序都会拥有路由了

var vm = new Vue({
    el: '#app',
    // 5. 在vue实例中注入路由, 这样整个应用程序都会拥有路由了
    router,
    data: {

    }
})
复制代码

1.6 通过router-view挖坑, 路径匹配到的组件都会渲染到这个组件来

<div id="app">
	<router-view></router-view>
</div>
复制代码

1.7 vue路由中通过router-link去做跳转, 他有一个to属性, to属性的值必须和path中的值对应

router-link将来会被渲染成为a标签, 他的to属性会被渲染成a标签的href属性, 但它的值前面会加一个#,变为锚点

<div id="app">
    <ul>
        <li><router-link to="/index">首页</router-link></li>
        <li><router-link to="/product_type">蔬菜</router-link></li>
        <li><router-link to="/product_type">水果</router-link></li>
        <li><router-link to="/product_type">肉类</router-link></li>
    </ul>
    <router-view></router-view>
</div>
复制代码

2. 路由参数

2.1 router传递参数

<div id="app">
    <ul>
        <li><router-link to="/index">首页</router-link></li>
        <li><router-link to="/product_type/11">蔬菜</router-link></li>
        <li><router-link to="/product_type/22">水果</router-link></li>
        <li><router-link to="/product_type/33">肉类</router-link></li>
    </ul>
    <router-view></router-view>
</div>
复制代码
const router = new VueRouter({
    routes:[
        {name:'index', path:'/index', component:index},
        {name:'productType', path:'/product_type/:id', component:productType}
    ]
})
复制代码

2.2 接收参数

2.2.1 组件接收参数

在html中获取路由参数, 通过$route.params.参数名

var productType = Vue.component('productType',{
    //在html中获取路由参数, 通过$route.params.参数名
    template:'<div>这里显示商品编号{{$route.params.id}}</div>',
})
复制代码

2.2.2 js接收参数

在js中获取路由参数, 通过this.$route.params.参数名

var productType = Vue.component('productType',{
    //在html中获取路由参数, 通过$route.params.参数名
    template:'<div>这里显示商品编号{{$route.params.id}}</div>',
    //模板编译完成之后调用
    mounted() {
        //在js中获取路由参数, 通过this.$route.params.参数名
        console.log(this.$route.params.id)
    },
})
复制代码

3. 响应路由参数的变化

​ 提醒一下,当使用路由参数时,例如从 /user/foo 导航到 /user/bar原来的组件实例会被复用 。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。 不过,这也意味着组件的生命周期钩子不会再被调用

3.1 复用组件时,想对路由参数的变化作出响应的话,你可以简单地 watch (监测变化) $route 对象:

var productType = Vue.component('productType',{
    data(){
        return {
            allProduct:''
        }
    },
    //在html中获取路由参数, 通过$route.params.参数名
    template:`
<div>
这里显示商品编号{{$route.params.id}}
<p>{{allProduct}}</p>
</div>
`,
    //模板编译完成之后调用
    mounted() {
        //在js中获取路由参数, 通过this.$route.params.参数名
        console.log(this.$route.params.id)
    },
    watch: {
        //to表示你将要去的路由对象, from表示你从哪个路由来
        '$route'(to,from){
            console.log(to)
            console.log(from)
            if(to.params.id==='11'){
                this.allProduct = '葫芦不等等'
            }else if(to.params.id==='22'){
                this.allProduct = '西瓜'
            }else{
                this.allProduct = '猪肉/牛肉'
            }
        }
    }
})
复制代码

3.2 或者使用 2.2 中引入的 beforeRouteUpdate 导航守卫

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}
复制代码

4. 嵌套路由和编程式导航

嵌套路由

vue-router路由基础

4.1 嵌套路由

4.1.1 嵌套路由创建

const router = new VueRouter({
    routes:[
        {name:'index', path:'/index', component:index},
        {name:'productType', path:'/product_type/:id', component:productType,
             children:[
                 //嵌套中的path不能加'/'
                 {name:'cookBook', path:'cook_book',component:cookBook}
             ]
        }
    ]
})
复制代码
var cookBook = Vue.component('cookBook]',{
    template:'<div>我这里很多食谱, 欢迎查看</div>'
})
复制代码

4.1.2 在被嵌套的组件中占坑''

var productType = Vue.component('productType',{               
    template:`
            <div>
            这里显示商品编号{{$route.params.id}}
            <p>{{allProduct}}<button @click='jumpTo'>查看食谱</button></p>
            <router-view></router-view>
            </div>
    	`
})
复制代码

4.2 编程式导航

通过 '<button @click='jumpTo'>查看食谱' 跳转

var productType = Vue.component('productType',{               
    template:`
            <div>
            这里显示商品编号{{$route.params.id}}
            <p>{{allProduct}}<button @click='jumpTo'>查看食谱</button></p>
            <router-view></router-view>
            </div>
    	`
})
methods: {
    jumpTo(){
        //通过$router来跳转
        this.$router.push({name:'cookBook'})
    }
},
复制代码

5. 路由重定向

重定向也是通过 routes 配置来完成

{name:'default',path:'*',redirect: '/index'},
复制代码

重定向的目标也可以是一个命名的路由:

{name:'default',path:'*',redirect: {name:'index'}}
复制代码

甚至是一个方法,动态返回重定向目标:

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
    }}
  ]
})
复制代码

以上所述就是小编给大家介绍的《vue-router路由基础》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

数字化崇拜

数字化崇拜

[加] 文森特·莫斯可 / 黄典林 / 北京大学出版社 / 2010-1 / 26.00元

与此前的许多技术发展一样,以互联网为标志的数字化时代同样为人们提供了社会根本性变革的许诺:通过电脑,我们可以超越时空和政治。在本书中,文森特·莫斯可透过技术发展和经济泡沫的迷雾,试图探明围绕数字化新技术出现了哪些迷思,以及为何人们对这些迷思坚信不疑。他认为互联网时代投资者如此狂热的动因并不是他们对经济规则的无知,而是对赛博空间开启了一个新世界这样的迷思的坚定信念。 莫斯可指出,迷思并不是一些......一起来看看 《数字化崇拜》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试