Vue中的路由使用及添加参数

  • 在一个系统中会由很多页面组成,在Vue开发中这些页面通常使用的是Vue中的组件来实现的,那么当在一个页面要跳转到另外一个页面的时候是通过改变url路径来实现的,那么这个时候Vue需要知道当前url对应的是哪个组件页面

<html lang="en">

<head>
    <title>title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./vue2.js">script>
    
    <script src="./vue-router.js">script>
head>

<body>
    <div id="app">
        <ul>
            
            <li>
                <router-link to="/index">首页router-link>
            li>
            <li>
                <router-link to="/productType/11">蔬菜router-link>
            li>
            <li>
                <router-link to="/productType/22">水果router-link>
            li>
            <li>
                <router-link to="/productType/33">肉类router-link>
            li>
        ul>
        
        <router-view>router-view>
    div>

    <script>
        //2.准备路由需要的组件
        var index = Vue.component('indexA', {
            template: `
这是首页
`
}) var productType = Vue.component('indexB', { // 在html中获取路由参数 通过$route.params.参数名 template: `
这是显示商品编号{{$route.params.id}}
`
, mounted() { // 在js中获取路由参数 通过this.$route.params.参数名 console.log(this.$route.params.id); console.log(this.$route); } }) //3.创建路由对象在这个对象里面去配置路由规则 var router = new VueRouter({ // 4. 通过routes属性配置路由规则,它是一个数组,数组中放的是对象,每个对象对应一条规则,并且每个对象里面都包含有name(表示路由规则的名称)/path(表示路径)/component(表示路径对应的组件) routes: [{ name: 'indexA', component: index, path: '/index' }, { name: 'productType', component: productType, path: '/productType/:id' //路由加参数方法 :参数名 }] }) var vm = new Vue({ el: '#app', // 5. 在vue实例中注入路由,这样整个应用程序都会拥有路由了 router, data: { } })
script> body> html>

你可能感兴趣的:(Vue)