vue-Router记录

最新推荐文章于 2024-07-30 14:25:01 发布

end-less

最新推荐文章于 2024-07-30 14:25:01 发布

阅读量241

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/zg97zb/article/details/112280857

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.导入vue-router.js文件

npm install vue-router -D

2.简单使用vue-router

首先在src目录下创建router文件夹，并创建一个index.js文件

在index.js文件中实例化一个router

import Vue from 'vue'
import vueRouter from 'vue-router'
Vue.use(vueRouter)
let routes = [
    {
        path:'/',
        component:resolve => require(['../components/HelloWorld'], resolve)
    },
    {
        path:'/about',
        component:resolve => require(['../components/about.vue'], resolve)
    }
]
export default new vueRouter({
    routes
})

然后在main.js入口文件引入路由文件

import Vue from 'vue'
import App from './App.vue'
import router from './router' // 引入路由

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router //将路由传入vue实例 
}).$mount('#app')

最后在app.vue中使用路由

<template>
  <div id="app">
    <router-link to="/">首页</router-link> | 
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: "App",
};
</script>

效果图：

3.路由传参

传参分为两种方式：

1、params

,
    {
        path: '/user/:username',
        component: {
            template: `
                <div>
                   <div>我叫 {{$route.params.username}} </div>
                   <div>今年 {{$route.query.age}} 岁</div>
                </div>
            `
        }
    },

通过访问/user/张三即可获取到数据,例如通过$route.push({name:'路由名称',params:{name:'张三',age:'18'}})

2、query方式，直接在url后面加上?age=18 然后通过$route.query.age获取对应的值

4.子路由

在需要添加子路由的路由下添加children ,格式与父路由格式一致

注意：要访问子路由需要在父路由组件内添加

<router-link to="more" append>详细信息</router-link>。其中append表示在当前路由后面追加more。通过这种方式来访问子路由

{
        path: '/user/:username',
        component: {
            template: `
                <div>
                   <div>我叫 {{$route.params.username}} </div>
                    <router-link to="more" append>详细信息</router-link>
                    <router-view></router-view>
                </div>
            `
        },
        children:[
            {
                path:'more',
                component:{
                    template:`
                    <div>
                        <div>姓名：{{$route.params.username}} </div>
                        <div> test 特斯拉test 特斯拉test 特斯拉test 特斯拉</div>
                    </div>
                    `
                }
            }
        ]
    }

5.命名视图

通过命名视图可以在一个页面分区域渲染组件。例如左边市菜单栏中间是内容栏

 <router-view name="sidebar"></router-view>
 <router-view name="content"></router-view>

通过下面这种方式进行渲染组件

{
        path: '/',
        components:{
            sidebar:{
                template:`
                <div>这是首页。。。</div>
                `
            },
            content:{
                template:`
                <div>这是内容本部分。。。</div>
                `
            }
        }
    }

6.导航钩子

主要用到router.beforeEach(function(to,from,next){/****/}) to表示从哪里来 from表示去哪里 next表示需要跳转到那个路由