Программная навигация

Последнее обновление: 05.11.2020

Для перехода к ресурсам внутри приложения Vue мы можем создавать ссылки с помощью элемента <>. Однако иногда возникает необходимость выполнить программно переход к другому ресурсу внутри кода JavaScript. Во Vue 3 для программной навигации применяется метод this.$router.push(), в который передается информация о ресурсе, на который надо выполнить переход.

Рассмотрим простейший пример:

<!DOCTYPE html>
<html>
<head>
<title>Маршрутизация во Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <router-view></router-view>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-router"></script>
<script>
const NotFound = { template: '<h2>Страница не найдена</h2>' }
const Home = { template: 
	`<h2>Home Page</h2>
	<div><button @click="navigate">To About</button></div>` ,
	methods: {
		navigate(){
			router.push('/about')
		}
	}
}
const About = { template: '<h2>About Page</h2>' }
 
const routes = [
	{ path: '/', component: Home },
	{ path: '/about', component: About },
	{ path: '/:pathMatch(.*)*', component: NotFound  }
];
const router = VueRouter.createRouter({
  history: VueRouter.createWebHistory(),
  routes,
});

const app = Vue.createApp({});
app.use(router);	
app.mount('#app');
</script>
</body>
</html>

В данном случае в компоненте Home по нажатию на кнопку выполняется переход по пути "/about" (то есть по сути к компоненту About):

router.push('/about')
Программная навигация в Vue 3

В метод router.push() можно передавать не только прямой путь к другому ресурсу, но и другую информацию о ресурсе, на который надо ввыполнить переход:

// простой путь
router.push('/about')

// объект с параметром path
router.push({ path: '/about' })

// переход к маршруту с именем 'product' и передачей ему параметра id=3
router.push({ name: 'product', params: { id: '3' } })

// переход на /product?id=4
router.push({ path: '/product', query: { id: '4' } })

// переход на /about#main
router.push({ path: '/about', hash: '#main' })

Стоит учитывать, что если указан путь с помощью опция path, то опция params, которая представляет передаваемые параметры, игнорируется. Однако в связки с опцией path можно использовать опцию query.

Рассмотрим другой пример с передачей параметра и строки запроса:

<!DOCTYPE html>
<html>
<head>
<title>Маршрутизация во Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <router-view></router-view>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-router"></script>
<script>
const NotFound = { template: '<h2>Страница не найдена</h2>' }
const Home = { template: 
	`<h2>Home Page</h2>
	<div><button @click="navigate">Best Phone</button></div>` ,
	methods: {
		navigate(){
			router.push({ name: 'product', params: { cat: 'phone' }, query:{id: '1'} });
		}
	}
}
const Product = { 
	template: `<h2>Product</h2>
	<h3>Category: {{$route.params.cat}}</h3>
	<h3>Id: {{$route.query.id}}</h3>` 
}
 
const routes = [
	{ path: '/', component: Home },
	{ path: '/products/:cat', component: Product, name:'product'},
	{ path: '/:pathMatch(.*)*', component: NotFound  }
];
const router = VueRouter.createRouter({
  history: VueRouter.createWebHistory(),
  routes,
});

const app = Vue.createApp({});
app.use(router);	
app.mount('#app');
</script>
</body>
</html>

В данном случае в компоненте Home по нажатию на кнопку вызывается метод

router.push({ name: 'product', params: { cat: 'phone' }, query:{id: '1'} });

Он приведет к переходу к маршруту с именем "product", который обрабатывается компонентом Product, а фактически к адресу "products/phone?id=1".

метод router.push в Vue 3

НазадСодержание

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850