vue router命名路由与视图

vue router命名路由与视图

一、命名路由

1.1 name

{
    
    
	path:'/user/:id',
	name:'user',
	component:User,
}

1.2 html方式–router-link

方式1
<router-link to="/user/123">Go to User</router-link> 
方式2
<router-link :to="{name:'user',params:{id:369}}">Go to User</router-link>

1.3 js方式–router.push

this.$router.push({
    
    name:'user',params:{
    
    id:1234}})

二、命名视图

2.1 新建2个视图

ShowMain.vue

<template>
    <h2>showMain</h2>
</template>

ShowSide.vue

<template>
    <h2>showSide</h2>
</template>

2.2 配置路由器index.js

其中 component 修改成components

const routes = [
    {
    
     
        path: '/', 
        components: {
    
    
            default:Home,
            ShowMain,
            ShowSide,
        } 
    },
 ]

2.3 配置App.vue

router-view name=‘指定渲染位置’

  <router-view></router-view>
  <router-view name="ShowMain"></router-view>
  <router-view name="ShowSide"></router-view>