Vue -不带VueRouter的观看url
Vue是一种流行的JavaScript前端框架，用于构建用户界面。它具有以下特点：
概念：
Vue是一种基于组件的框架，它将用户界面划分为独立的可重用组件。每个组件包含自己的模板、逻辑和样式，可以通过组合这些组件来构建复杂的用户界面。
分类：
Vue属于前端开发领域，主要用于构建用户界面。
优势：
- 简单易学：Vue的语法简洁明了，学习曲线较为平缓，使得开发者能够快速上手。
- 双向数据绑定：Vue使用了响应式的数据绑定机制，能够实时更新数据和界面，提高开发效率。
- 组件化开发：Vue将界面拆分为独立的组件，使得代码可复用性高，易于维护和扩展。
- 轻量高效：Vue的体积较小，加载速度快，性能优秀。
- 生态丰富：Vue拥有庞大的社区和生态系统，有大量的插件和工具可供选择。
应用场景：
Vue适用于构建各种类型的Web应用程序，包括单页面应用（SPA）、多页面应用（MPA）和移动应用程序等。
推荐的腾讯云相关产品和产品介绍链接地址：
腾讯云提供了一系列与Vue相关的产品和服务，包括云服务器、云数据库、云存储等。您可以通过以下链接了解更多信息：
- 云服务器（CVM）：腾讯云提供高性能、可扩展的云服务器，可用于部署Vue应用程序。详情请参考：云服务器产品介绍
- 云数据库MySQL版（CDB）：腾讯云提供稳定可靠的云数据库服务，可用于存储Vue应用程序的数据。详情请参考：云数据库MySQL版产品介绍
- 对象存储（COS）：腾讯云提供高可靠、低成本的对象存储服务，可用于存储Vue应用程序的静态资源。详情请参考：对象存储产品介绍
请注意，以上链接仅供参考，具体产品选择应根据实际需求进行评估和决策。
相关·内容
在不包含VueRouter的情况下，是否有可能对Vue组件中的URL更改做出反应？
如果存在VueRouter，我们可以观看$route，但是，我的应用程序并不依赖于VueRouter。
export default {
watch: { '$route': route => console.log(window.location.href) }
}
浏览 0提问于2018-01-19得票数 6
回答已采纳
所以在我的laravel应用程序中，我们有一个网址
http://mywebsite.in/wfengine/search/
现在我想使用laravel路由器在上面的链接上工作，但似乎什么都没有发生。
Router.js
import VueRouter from 'vue-router';
let routes = [
{
path:'/filters',
componenet: require('./views/filter')
}
];
export default new VueRou
浏览 4提问于2017-06-12得票数 1
2回答
模拟路由器模块玩笑
、、、
In apiFile.js，
import router from './router';
myFn(){
const url = router.app.$appSettings.redirectUrl
}
./路由器文件，
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [{...}]
const router = new VueRouter({
mode: 'history',
浏览 4提问于2021-06-09得票数 0
1回答
根据文件中的信息。我可以从url中获取参数，并将它们作为参数传递给组件。
我试试看：
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter);
var router = new VueRouter({
mode: 'history',
routes: [
{ path: '/', component: App, props: (r
浏览 1提问于2018-09-14得票数 0
为了摆脱#，我在历史模式下设置了我的vue-router。完成此更改后，每次我在浏览器(例如)中访问应用程序的url时，我的应用程序都会抛出404错误。然而，当访问相同的url表单登录页面时(当vue-router已经加载时)，它可以工作。
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home.vue'
import Verify from '@/views/Verify.vue'
Vue.use(VueRo
浏览 0提问于2020-06-15得票数 0
1回答
我在学vue。我通过npm安装vue-路由器安装vue-路由器.我注册了VueRouter，并在VueRouter实例中main.js文件中定义了url路径。创建关于组件和在app.vue文件中使用的组件。但这条路线在 url或中不起作用。我还试图从url中删除#标记。以下是源代码：
Main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import About from './components/Abou
浏览 1提问于2021-10-14得票数 0
为什么我的组件不加载？
根url
一定要给酒吧看吗？
谢谢你的帮助
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Home from './components/Home'
import Contact from '././components/Contact'
Vue.config.productionTip = false
Vue.use(VueRouter);
浏览 0提问于2018-11-17得票数 0
1回答
如何在Vue.js中加载应用程序时运行函数？我的代码如下所示
main.js
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
router/index.js
import Vue from 'vue'
import VueRouter from 'vue-rout
浏览 5提问于2021-08-14得票数 0
回答已采纳
1回答
我正在尝试创建Vue SPA应用程序。但该路由似乎与我在路由器中定义的路由不匹配。我不明白为什么会发生这种事。在我看来，一切都应该是正常的。这里我漏掉了什么？
我的index.html
<html>
<head>
<title>New Vue.js Project</title>
<script src="assets/js/vue.js"></script>
<script src="assets/js/vue-router.js
浏览 10提问于2019-08-20得票数 0
回答已采纳
在请求发布后，我尝试重定向，我尝试了不同的东西，但直到现在都没有效果。
self.$router.push('/record')
Vue.$router.push('/record')
this.$router.push({ name: 'Record' })
这里是更新的代码。使用axios表单组件，app.js和main.js
axios.delete('/record/' + this.id)
.then((response) => {
this.$router.push('/record')
浏览 2提问于2020-02-26得票数 0
2回答
我有一个应用程序在开发阶段，我尝试添加Vuejs。现在我想删除URL中的hash #。在vue-router实例中，我添加了路由，并尝试添加
<code>mode:history</code>
但它不起作用。有没有办法解决这个问题？谢谢
这是我的路线
require('./bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router'
import Appearance from './components/Appeara
浏览 0提问于2018-09-23得票数 2
1回答
我的路线有问题。我有一个简单的点击处理程序推到路由器。
methods: {
page(path) {
this.$router.push(path);
}
}
这将显示正确的内容，但是URL 简要地返回到正确的，然后返回到前面的URL。我只是新出现的，因为当我单击'back‘浏览器按钮时，URL是正确的。
我打开控制台，决定测试路由器。
$vm0.$router.push('/my-path');
它不仅显示了正确的内容，而且URL也是正确的。
我现在很困惑如何进一步调试这个问题，所以如果有人有任何想法，请告诉我。
router.js
impo
浏览 4提问于2020-02-19得票数 2
回答已采纳
是否可以访问Vue组件之外的VueRouter。
我尝试过在JavaScript文件中导入Vue。在这个文件中，我可以访问Vue.http，但不能访问Vue.router或Vue.$router。最后2次返回未定义。
main.js
import Vue from 'vue'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import routes from './config/routes'
import store from
浏览 6提问于2017-04-22得票数 44
回答已采纳
我试图从url中获取参数。
假设url包含：
localhost:8000/blog?q=hello
我想抓取hello来触发函数调用
我在app.js里用拉拉webpack说的话：
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
routes: []
})
const app = new Vue({
router
});
export default app;
在博客页面中
浏览 1提问于2019-03-21得票数 0
回答已采纳
1回答
我的main.js设置如下：
import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource';
Vue.config.productionTip = false;
Vue.use(VueRouter);
Vue.use(VueResource);
Vue.mixin({
methods: {
get_req: function(url) {
Vue.http.get(url, {
浏览 2提问于2017-11-03得票数 0
这是我的简单routes.js文件。
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import welcome from './components/welcome.vue';
import restaurant from './components/restaurant.vue';
import eatMe from './components/eat-me.vue';
const routes
浏览 1提问于2018-06-21得票数 12
回答已采纳
1回答
我曾尝试通过url访问其他页面，但这些页面从未加载。
这是我的main.js文件
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import VueRouter from 'vue-router'
Vue.config.productionTip = false
Vue.use(VueRouter)
import Index from './views/Index
浏览 4提问于2020-02-19得票数 0
回答已采纳
当用户使用路由的别名导航到页面时，URL与别名保持在一起，页面将正确呈现。
当用户导航到别名时，如何更改为path的URL？
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "@/views/Home.vue";
Vue.use(VueRouter);
const routes = [
{
path: "/404",
name: "404",
alias: "*",
浏览 1提问于2020-05-19得票数 1
回答已采纳
当用户点击登录按钮时，它会触发此函数以使用AWS Cognito：
signIn() {
let username = this.emailIn;
let password = this.passwordIn;
Auth.signIn(username, password)
.then(user => {
this.$router.push({ path: "dashboard" });
this.$store.commit("SETUSER", user);
this.$store.commit(&
浏览 20提问于2020-05-08得票数 0
3回答
我使用router-link浏览我的Vue/Laravel8 single page app
<router-link :to="{ hash: 'about' }">About us</router-link>
不幸的是，这个方法在#中留下了一个丑陋的url符号。
localhost:3000/#about
有什么常规的方法来摆脱#吗？^
编辑：
有人建议使用history mode，但这是一个router link to hash。我已经启用了history mode，但是它不会从url中删除#。
router.js
import
浏览 5提问于2021-09-18得票数 0
当我将模式更改为历史时，URL中的散列将被删除，但组件不会加载。这是app.js
window.Vue = require('vue');
import VueRouter from 'vue-router';
var index = Vue.component('index',
require('./components/frontend/testingIndexComponent.vue'));
var component1 = Vue.component('component1',
require(
浏览 2提问于2018-05-09得票数 0
我的main.js文件有以下内容
import TurbolinksAdapter from 'vue-turbolinks';
import Vue from 'vue/dist/vue.esm';
import VueRouter from 'vue-router';
import EventIndex from '../src/views/EventsIndex.vue';
import EventsTable from '../src/components/EventsTable.vue'
import {
浏览 0提问于2020-01-29得票数 0
还有第二个警告:在./src/main.js中的“导出‘默认”(导入为'Vue')中没有找到'vue'.中的警告。
它给我展示了一个空白站点，路由器可能出了问题，下面是我的App.vue的脚本(不确定)：
从“@/路由器”导出默认{}导入路由器
这是我的index.js：
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/home.vue'
Vue.use(VueRouter)
const rou
浏览 2提问于2021-04-20得票数 2
我有一个用于多个部署的vue.js应用程序。对于一个部署，url应该是<domian>/。然而，对于其他方面，它可能需要是<domain>/tool。这些路由将使用环境变量：TOOL_ROUTE=/或TOOL_ROUTE=/tool设置。
问题是，使用vue-路由器时，我需要在main.js中指定该工具应该从url中得到什么：
require('babel-polyfill');
var Vue = require('vue');
var VueRouter = require('vue-router');
var Vue
浏览 1提问于2017-10-02得票数 2
我正在尝试使用router.push({ path: 'customers', query : mergedQuery });重定向url，但我无法获得对router属性的正确引用。
我觉得我在app.js中遗漏了一些东西，但又不确定是哪一个。在组件this.$route内部有一些东西，但是没有router属性。
app.js
window.Vue = require('vue');
window.VueRouter = require('vue-router');
window.VueResource = require('vue-re
浏览 15提问于2017-01-17得票数 1
回答已采纳
我的main.js如下
import Vue from 'vue'
import App from './App'
import vueResource from 'vue-resource'
import VueRouter from 'vue-router'
import Registration from './components/Registration.vue'
import Login from './components/Login.vue'
Vue.config.produ
浏览 0提问于2017-05-05得票数 0
在前端大部分是新的，在Vue肯定是新的。我正在尝试从URL读取查询参数。关注How can I get query parameters from a URL in Vue.js?和https://router.vuejs.org/guide/#javascript 我现在有了这个代码： <!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<s
浏览 49提问于2020-03-28得票数 0
回答已采纳
我有一个使用vue路由器的vue应用程序。我为登录路由实现了一个身份验证系统。如何让它在登录成功后自动重定向到用户最初想要访问的路由？ 这是我的代码 import Vue from "vue";
import VueRouter, { RouteConfig } from "vue-router";
import Home from "../views/Home.vue";
import Collections from "../views/Collections.vue";
import Login from ".
浏览 167提问于2021-11-17得票数 0
2回答
在我的main.js文件中，我注册了Vue：
import Vue from 'vue';
import VueRouter from 'vue-router';
import VueResource from 'vue-resource';
import VueI18n from 'vue-i18n';
import App from './components/App.vue';
// Register plugins
Vue.use(VueResource);
Vue.use(VueRouter);
Vu
浏览 14提问于2016-09-23得票数 0
回答已采纳
1回答
我想在移动到本地主机时显示“Welcome.vue”：8080/main
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'
import Vuelidate from 'vuelidate'
Vue.config.productionTip
浏览 0提问于2022-05-22得票数 1
回答已采纳
嗨，我正在尝试在VueJs中使用lazyload，我的代码是这样的： window.Vue = require('vue');
import VueRouter from 'vue-router';
Vue.use(VueRouter);
function lazyLoad(view){
return() => import(`../views/${view}.vue`)
}
export default new VueRouter({
mode: 'history',
base: process.env.BASE_URL
浏览 75提问于2021-04-09得票数 0
回答已采纳
我有一个使用Azure Static Web App部署的vue项目。项目包含路由器(历史模式)功能。它在本地运行得很好。但是在部署到Azure路径链接后，它不能正常工作。例如，当我试图从浏览器导航访问mysite.com/about时，它返回404错误。
公共文件夹中的staticwebapp.config.json文件：(我以微软文档中的这个例子为例)
{
"routes": [
{
"route": "/*",
"serve": "/index.html",
浏览 8提问于2021-04-20得票数 1
2回答
你好，我有一个包含多个角色(VueJs+Laravel)的项目，我使用laravel作为后端，vuejs作为前端，我有三个不同的角色(用户、Modirator、Editor)。
这是我在app.js中的代码
// VueRouter
import VueRouter from 'vue-router';
import routes from './routes.js';
Vue.use(VueRouter);
var router = new VueRouter({
mode: 'history',
routes
})
这是我的
浏览 2提问于2019-10-03得票数 0
回答已采纳
1回答
我用Vue Cli
要创建延迟加载组件，如下所示：
router/admin/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
function lazyLoad(component){
return() => import(/* webpackChunkName: "/chunk/" */ '../../components/' + component)
}
const routes =
浏览 8提问于2019-12-17得票数 1
回答已采纳
2回答
我不能使用我的Vue.prototype.$http，因为我不知道如何使它在我的路由文件中可用。
axios.js
import Vue from 'vue';
import axios from 'axios';
// noinspection JSIncompatibleTypesComparison
const isDevelopmentMode = process.env.NODE_ENV === 'development';
// base URL for backend access
const backendUrl = (isD
浏览 4提问于2020-12-29得票数 0
回答已采纳
我曾尝试通过url访问其他页面，但这些页面从未加载。
etc
这是我的main.js文件：
import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router"
Vue.config.productionTip = false
Vue.use(VueRouter);
import Users from './components/Users.vue'
const Home = { template: "<p>
浏览 1提问于2020-02-20得票数 1
回答已采纳
1回答
Vue不显示特定路线上的组件
、、、、
基本上，我想在我的Login Route上呈现Login组件，但它没有呈现- 登录组件- <template>
<v-app>
<h1>Login Component</h1>
</v-app>
</template>
<script>
export default {
}
</script> Routes.js- import Vue from 'vue'
import VueRouter from 'vue-router'
import Home
浏览 14提问于2019-12-18得票数 0
1回答
我已经安装了带节点的vue路由器。这是我的项目url http://localhost/UserApp/public。
我使用的两个vue路由是/home & /about，所以当我单击主路由时。它将我重定向到http://localhost/home，但应该是http://localhost/UserApp/public/home。所以当我重新加载页面时。它会引发object not found错误。因为没有像http://localhost/home这样的路线。我该如何解决这个问题？
app.js
import Vue from 'vue'
import VueRo
浏览 0提问于2017-11-02得票数 1
1回答
在歌曲组件中，我有一个其他专辑的列表，所以每当我单击一个专辑时，它都会将我重定向到/ Songs /:id上。每张专辑都有自己的id。
这是从Home或任何其他组件开始工作的，但是每当我尝试从例如/songs/1到/songs/2时，它都不起作用。URL会改变，但网页保持不变。
这是我的路由器index.js文件。
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
co
浏览 0提问于2021-01-28得票数 0
1回答
VueJS :路由混乱
、、、
可能是个愚蠢的问题，尤其是我不确定我是在使用VueJS还是VueJS 2.0，但我正在尝试实现简单的路由工作，在这里我可以获取参数/ URL路径。
例如，*
这是我的main.js
import Vue from 'vue'
import App from './components/App'
import VueRouter from 'vue-router'
const routes = [
{ path: '/', name: 'Home', component: App },
{ path: &#
浏览 0提问于2018-10-08得票数 3
回答已采纳
1回答
如果我没有登录，我就被重定向到/login页面，登录后我被重定向到/home，我不知道为什么。因为必须重定向到vue.js组件。
web.php
Route::middleware('guest')->get('/', function () {
return redirect('/login');
});
Auth::routes();
Route::middleware('auth')->get('/{any}', function () {
return view('l
浏览 3提问于2020-03-16得票数 1
我试着用VueJS学习Laravel。我决定在我的书房中使用Vuetify，而不是通过npm安装它。
这是我的app.js：
import "material-design-icons-iconfont/dist/material-design-icons.css";
import "vuetify/dist/vuetify.min.css";
import Vue from "vue";
import Vuetify from "vuetify";
import App from "./components/App.vu
浏览 0提问于2019-02-20得票数 2
回答已采纳
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See :// webpack . js .org/concepts#loaders
> <template>
| <div class="container">
| <div
浏览 8提问于2020-10-01得票数 2
回答已采纳
我有一个Vue文件，如下所示：
import Vue from 'vue';
import VueRouter from 'vue-router';
export default Vue.extend({
name: 'MyComponentsName',
methods: {
doRedirect() {
this.$router.push({ name: 'another-route' });
},
},
});
然后在我的shims-vue.d.ts文件中：
declare modu
浏览 7提问于2020-06-03得票数 2
回答已采纳
我正在尝试用正式的路由库来实现简单的路由。
这是我的app.js
window.Vue = require('vue');
window.VueRouter= require('vue-router');
Vue.use(VueRouter);
const vt=Vue.component('example', require('./components/Example.vue'));
const router = new VueRouter({
routes:[
{
浏览 4提问于2017-03-02得票数 8
回答已采纳
我正试图在本地的web服务器上建立一个有http://localhost:3000/地址的实践网站。
当只涉及到HTML和JavaScript时，它正确地显示页面，但是当我尝试包含Vue时，它不起作用。
当我不包括Vue时，它工作得很好，所以我怀疑它表现得很有趣的原因是我准备的Vue文件没有正确地连接到其他文件，并且HTML文件没有识别它。
但解决这个问题的方法是什么呢？
我会在下面显示更多的背景信息。
目录&文件
目前，所有必需的文件都存储在一个名为slutuppgift的目录中，该文件夹包含以下子目录和文件。
slutuppgift/
|-- public/
浏览 0提问于2019-08-01得票数 4
回答已采纳
2回答
嗨，我正在测试我的vuex操作异步函数，它通过axios调用api，但我有一些问题，它显示了这样的错误：“TypeError: Cannot destructure property data of 'undefined‘or 'null’”。
35 | commit('storeSearchValue', name);
36 | const url = process.env.VUE_APP_URL_API_News + '/news' + '?q=' + name;
> 37 | cons
浏览 34提问于2019-11-19得票数 4
回答已采纳
1回答
我使用Laravel5.3与Vue 2和Vue路由器，但我的组件是不可见的。Foo和Bar正在工作。
这是我的App.js
/**
* Load JavaScript dependencies
*/
require('./bootstrap');
/**
* Import Vue and VueRouter
*/
import Vue from 'vue'
import VueRouter from 'vue-router'
/**
* Import Components
*/
import UsersIndex from &#
浏览 0提问于2016-11-07得票数 0
程序内容如图所示。路由配置文件位于路由的index.js文件中。因此，URL已更改，但页面始终与根页面一致。我尝试了很多方法，花了一个下午才解决。我是个初学者。我希望你不要嘲笑我，并能帮助我解决我的问题。谢谢你 app.vue： <template>
<div id="app">
root组件
<router-link to="/login"> to login</router-link>
<router-view></router-view>
<
浏览 58提问于2021-11-21得票数 0
1回答
我的main.js看起来像：
import Vue from 'vue'
import VueRouter from './router'
import routes from './router/index.js'
Vue.use(VueRouter)
const router = new VueRouter({
routes,
mode: 'history'
})
new Vue({
el: '#app',
router,
render: h => h(App)
})
我试着从网址上删除标签..。我使用W
浏览 3提问于2017-06-21得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
