如何在Vuejs中创建一条路由，使其不仅能到达页面，还能到达特定的元素？
在Vue.js中创建一条路由，使其不仅能到达页面，还能到达特定的元素，可以通过以下步骤实现：
- 首先，确保已经安装了Vue.js和Vue Router。可以使用npm或yarn进行安装。
- 在Vue.js的主文件（通常是main.js）中导入Vue和Vue Router，并创建一个新的Vue实例。
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/element',
name: 'Element',
component: Element
}
]
})
new Vue({
router,
render: h => h(App)
}).$mount('#app')- 在Vue.js项目的根目录下创建两个组件，分别用于展示主页和特定元素。
// Home.vue
<template>
<div>
<h1>Home Page</h1>
<!-- 主页内容 -->
</div>
</template>
<script>
export default {
name: 'Home'
}
</script>
// Element.vue
<template>
<div>
<h1>Element Page</h1>
<!-- 特定元素内容 -->
</div>
</template>
<script>
export default {
name: 'Element'
}
</script>- 在Vue Router的配置中，将路由指向这两个组件。
const router = new VueRouter({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/element',
name: 'Element',
component: Element
}
]
})- 在Vue.js的模板中，使用
<router-link>标签创建链接，使用户能够导航到不同的页面和特定元素。
<router-link to="/">Home</router-link>
<router-link to="/element">Element</router-link>- 在Vue.js的模板中，使用
<router-view>标签来展示当前路由对应的组件。
<router-view></router-view>通过以上步骤，就可以在Vue.js中创建一条路由，使其不仅能到达页面，还能到达特定的元素。用户可以通过点击链接导航到不同的页面和特定元素。
相关·内容
2回答
Vue路由器工作效率
javascript、vuejs2、vue-router
我花了一整天的时间试图找出是什么让这个例子失败了：
Vue.use(VueRouter);
var PlayerDetail = {
template: '<div>FOO</div>'
};
var PlayerList = {
template: '<div>BAR</div>'
};
var routes = [{
path: '/player',
component: PlayerList
}, {
path: '/detail',
co
浏览 3提问于2017-05-19得票数 2
回答已采纳
3回答
从页面隐藏vue路由器
javascript、vue.js、vuejs2、vue-router
是否可以在我的登录页面中隐藏vue路由器？如果是这样，我该怎么做呢？在我有的每个页面上，我都看到了菜单，但在登录页面上，我不想看到它。
下面是我的代码：
登录
<template>
<div>
<h1>Login</h1>
<form action="">
<label>naam</label>
<input type="text">
</form>
&l
浏览 1提问于2017-03-20得票数 3
回答已采纳
1回答
从路由器设置时没有更新道具
javascript、vue.js、vue-router、watch
当我在路由定义中设置组件道具时，观察者无法工作，视图也从未更新过。
在本例中，更新正确工作：
const Home = { template: '<div>Home</div>' }
const Test = {
template: '<div>Test : {{ nb }}<br><button @click="addOne" type="button">+1</button></div>',
props: {nb: Number},
met
浏览 4提问于2019-11-25得票数 0
回答已采纳
1回答
无法使用VueRouter在我的不同路由器链路中导航
javascript、vue.js、vuejs2
我第一次使用vue-cli创建了一个项目。我使用VueRouter在多个视图之间导航。问题是，如果我访问了路由‘/研讨会’，‘/类别’或‘/机器’，它总是‘研讨会’组件出现……下面是我的路由器声明： import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Home from '../views/Home.vue'
import Categories from '../views/Categories.vue';
import
浏览 19提问于2021-01-17得票数 1
回答已采纳
3回答
用Vue路由器设置页面标题
javascript、laravel、vue.js、vue-router
我已经创建了一个带有页面标题(h1)的vue路由器。每个vue路由器链接都有一个元标题。如何动态设置h1页面标题？
我尝试过$emit，但这在我的路由器中不起作用。如何更改页面标题？
const dashboard = {
template: `<div>DASHBOARD</div>`
}
const about = {
template: `<div>ABOUT</div>`
}
const routes = [
{path: '/dashboard', component: dashboard, name:
浏览 0提问于2018-04-24得票数 10
回答已采纳
1回答
Vue.JS向router.js添加模板/组件
vue.js、vue-component、vue-router
如果有人告诉我如何在Vue.js中将一些模板导入到route.js中，我将非常感激：)
这是我的html
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app
浏览 0提问于2019-04-30得票数 1
2回答
如何在Vue 2中使用Vue路由器
vue.js、vue-router
我正在学习Vue，并从开始。我要做的第一件事是添加对Vue路由器的支持，但是现在我已经花了几个小时在它上，没有能够呈现一个单一的路由(我总是以一个空白页结束)。令人沮丧！
我只是想要一个.vue文件，充当布局文件，将不同的.vue文件作为“页面”呈现到其中。有人能告诉我怎么做吗？以下是我最近一次失败的尝试：
main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
import Home from './componen
浏览 6提问于2016-11-26得票数 6
回答已采纳
1回答
如何在使用vue.js时在index.js中配置路由器-查看默认页面
javascript、vue.js
在我的项目中，我使用vue.js 2.9。 我有detail.vue页面，一些html代码是这样的： <div class="tab">
<div class="tab-item">
<router-link to='/goods' >goods</router-link>
</div>
<div class="tab-item">
<router-link to='/ratings' >ratings</r
浏览 34提问于2019-02-19得票数 0
回答已采纳
1回答
如何在Vue中正确使用render函数？
javascript、vue.js
我刚刚开始使用render函数，遇到了一个问题。在呈现时，Home组件不显示在
App.vue
<template>
<div>
<h1>Vue Router Demo App</h1>
<p>
<router-link :to="{ name: 'home' }">Home</router-link> |
<router-link :to="{ name: 'hello' }">Hello
浏览 2提问于2020-07-06得票数 0
3回答
VueJS路由器不加载组件
vue.js、vue-component、vue-router
我使用的是VueJS路由器，但是路由器没有加载组件。
我有About.vue和Contact.vue只需要测试标签-如下所示：
<template>
<div>
<h1>Contact page. Welcome baby!</h1>
</div>
</template>
这里是App.vue，有三个路由器链接和路由器视图.
<template>
<div>
<h1>Routing</h1>
<router-link to=&#
浏览 1提问于2017-09-01得票数 5
回答已采纳
1回答
Vue路由器不呈现/挂载根路径组件。
javascript、vue.js、vue-router
我正在使用vue、vue-router和laravel创建一个页面，问题是，当我输入localhost/myproject/public_html/时，Home组件没有在router-view中呈现，如果我单击到服务组件的路由器链接，它正常地呈现内容，当我单击它呈现主组件内容的主路径时，为什么会出现这种情况？这是我的app.js结构
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import App from './views/App'
i
浏览 0提问于2018-07-17得票数 2
回答已采纳
1回答
如何在html中定义vue-router组件？
django、vue.js、vue-router
我正在使用django + vue.js + vue-router.js来完成我的项目。我正在尝试在单个html页面中使用vue-router。我找了一段时间，所有的例子都是使用.vue组件，或者简单地在js部分中定义组件模板，就像这样： <body>
<div id="app">
<div>
<router-link to="/foo">Go to Foo</router-link>
<router-link to=
浏览 192提问于2019-02-18得票数 0
1回答
如何影响不属于<路由器视图>的路由器转换元素？
javascript、vue.js、vuejs2
我把jsfiddle上的片段链接起来，因为阻塞路由
我在浏览视图组件时添加了一个路由器过渡动画。
const One = {
template: '<div>Home</div>'
}
const Two = {
template: '<div>Foo</div>'
}
const router = new VueRouter({
mode: 'history',
routes: [{
path: '/',
component: One
浏览 2提问于2020-10-06得票数 0
回答已采纳
1回答
如何在不停顿的情况下听音乐，同时改变页面？
vue.js、vuex、vue-router
在使用Vue js更改页面时，我怎么能继续播放音乐呢？
业务原则：
用户开始听example.comHe页面上的音乐，到example.com/about，他开始听的音乐没有停止。
我想我必须在父组件中的音乐，因为它是自己的单独的组成部分，但我不确定。
App.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
浏览 4提问于2019-12-03得票数 4
回答已采纳
2回答
使VueI18n对路由器链接标签作出反应
javascript、vue.js、vue-i18n
我有这个Vue应用程序，它由一个简单的主页，一个标题，和一个主页文本组成。你可以在我的上在线查看这个应用程序。以下是代码：
<div id="app">
My header app
<router-view></router-view>
</div>
JavaScript
const Home = {
template: `
<div>
<h1>{{ $t('home.title') }}</h1>
<p v-h
浏览 1提问于2019-01-21得票数 1
回答已采纳
2回答
vue 2.0和vue-router 2.0构建SPA，路由器视图未更新
vue.js、vuejs2、vue-router、vuex
使用vue 2和vue-router 2和vuex 2构建单页面应用程序，但不要更新
/src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { sync } from 'vuex-router-sync'
sync(store, router)
new Vue({
router,
store,
...Ap
浏览 0提问于2016-11-01得票数 0
3回答
路径的Vue路由配置“组件”：/不能是字符串id
php、node.js、vuejs2、vue-component、vue-router
我正在学习Vue js-v2.5.3。
我正在使用组件和路线的概念来开发项目。在组件工作的地方，但是当我试图定义路由时，就会出错
Uncaught Error :: route config component for path: /signin cannot be a string id.
Use an actual component instead.
或
Uncaught Error :: route config component for path: / cannot be a string id.
Use an actual component instead.
我无法理
浏览 5提问于2017-11-07得票数 0
1回答
拉威尔路线与Vue路线冲突
laravel、vue.js、vue-router
我正试着用拉拉和vue创造一个SPA。还安装了航海家为管理目的。旅行者是。用的是拉里的网络路线。
现在无法访问它，我正在为我的路由使用Vue路由器:例如我的家乡路由(vue)
app.js
...
import VueRouter from 'vue-router';
import App from './components/App.vue';
import Home from './components/Home.vue';
Vue.use(VueRouter);
const router = new VueRouter({
浏览 0提问于2018-06-21得票数 1
1回答
Vuejs不呈现子路由
vue.js、vuejs2、vue-router
我正在尝试学习有关子路线，但下面的代码不起作用。
代码
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script type="text/javascript" src="https://unpkg.com/vue-router@2.0
浏览 1提问于2018-04-24得票数 0
回答已采纳
1回答
在webpack 2中使用时，Vue 2.0路由器视图不起作用
vue.js、vue-router
当我单击foo时，控制台将按预期打印，但<router-view>不呈现任何内容。
官方文档只显示如何在单个html文件中使用它，javascript代码直接嵌入其中。我读过很多例子，但我不能在webpack中读懂。
或者在《webpack》中有关于vue 2路由器的例子吗？
我将app.vue文件创建为布局：
<template>
<div id="app">
<h1>Hello App!</h1>
<p>
<router-link to="/foo">Go
浏览 0提问于2017-04-27得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
