我正在学习Vue路由器.我想进行程序化导航(没有<router-link>).我的路由器和视图:
router = new VueRouter({
routes: [
{path : '/videos', name: 'allVideos', component: Videos },
{path : '/videos/:id/edit', name: 'editVideo', component: VideoEdit },
]
});
new Vue({
el: "#app",
router,
created: function(){
if(!localStorage.hasOwnProperty('auth_token')) {
window.location.replace('/account/login');
}
router.push({ name: 'allVideos' })
}
})
因此,默认情况下,我推送到'allVideos'路线,在该组件内部,我有一个按钮和方法,可以重定向到''editVideo'按钮:
<button class="btn btn-sm btn-warning" @click="editVideo(video)">Edit</button>
方法:
editVideo(video) {router.push({ name: 'editVideo', params: { id: video.id } })},
它工作正常.但是当我尝试在VideoEdit组件中获取id时,我得到$route.params.id了错误Uncaught ReferenceError:$ route未定义
也许是因为我现在不使用npm只是Vue和Vuerouter的cdn版本.有解决方案吗 谢谢!
更新:在Vue开发工具中使用btw我在组件中看到了$ route实例
更新:
var VideoEdit = Vue.component('VideoEdit', {
template: ` …我有一个vue应用程序与路由器设置如下:
import index from './components/index.vue';
import http404 from './components/http404.vue';
// module lazy-loading
const panda= () => import(/* webpackChunkName: "group-panda" */ "./components/panda/panda.vue");
// ...
export const appRoute = [
{
path: "",
name: "root",
redirect: '/index'
},
{
path: "/index",
name: "index",
component: index
},
{
path: "/panda",
name: "panda",
component: panda
},
//...
{
path: "**",
name: "http404",
component: http404
}
];
所以熊猫模块是懒惰的.然而,当我导航到panda的页面,一个的console.log()this.$route.path中App.vue的mounted()生命周期仅输出
"/"
代替
"/熊猫"
但索引页面运行良好,它完全显示
"/指数"
正如所料.
那么,当页面最初加载时,Vue路由器如何才能正确获取延迟加载页面的当前路径？我错过了什么？
编辑:
但是,它可以在Webpack热重新加载后捕获正确的路径.它在第一次访问时捕获"/" …
我试图自定义处理程序添加InlineButtonClickHandler到<router-link>组件的click事件,这样我就可以发出一个自定义appSidebarInlineButtonClick事件.
但是,我的代码不起作用.我究竟做错了什么？
<template>
<router-link :to="to" @click="InlineButtonClickHandler">
{{ name }}
</router-link>
</template>
<script type="text/babel">
export default {
props: {
to: { type: Object, required: true },
name: { type: String, required: true }
},
methods: {
InlineButtonClickHandler(event) {
this.$emit('appSidebarInlineButtonClick');
}
}
}
</script>
是否可以访问Vue组件外部的VueRouter.
我试过在JavaScript文件中导入Vue.在这个文件中我可以访问Vue.http,但不能Vue.router或Vue.$router.最后2个返回undefined.
import Vue from 'vue'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import routes from './config/routes'
import store from './store'
import * as rootUrl from './config/rootUrl'
//Routing support
Vue.use(VueRouter);
//Backend support
Vue.use(VueResource);
const router = new VueRouter({
mode: 'history',
routes: routes
})
new Vue({
store,
router,
}).$mount('#app')
Vue.http.get(rootUrl.url, {Accept: "application/json"}).then(response => {
let data = response.body
store.commit('SET_APP_DATA', { data: {
'title': data.title,
'peopleUrl': data.people,
'eventsUrl': data.events
}})
store.commit('SET_READY')
})
在我的应用程序中,一些路由只对经过身份验证的用户可访
当未经身份验证的用户点击必须登录的链接时,他将被重定向到登录组件.
如果用户成功登录,我想在他必须登录之前将其重定向到他请求的URL.但是,如果用户在登录之前没有请求其他URL ,也应该有默认路由.
如何使用vue-router实现此目的？
router.beforeEach(
(to, from, next) => {
if(to.matched.some(record => record.meta.forVisitors)) {
next()
} else if(to.matched.some(record => record.meta.forAuth)) {
if(!Vue.auth.isAuthenticated()) {
next({
path: '/login'
// Redirect to original path if specified
})
} else {
next()
}
} else {
next()
}
}
)
我的登录组件中的登录功能
login() {
var data = {
client_id: 2,
client_secret: '**************',
grant_type: 'password',
username: this.email,
password: this.password
}
// send data
this.$http.post('oauth/token', data)
.then(response => {
// authenticate …我有一个相当简单的VueJS应用程序,3个组件(Login,SelectSomething,DoStuff)
登录组件只是用户和传递输入的表单,而第二个组件需要显示登录进度中获得的一些数据.
如何将数据从一个组件共享给其他组件？因此,当我路由到第二个组件时,我仍然在Login 1中获得了数据？
编辑
所以我发现它与路由器处于历史模式有关,如果我'mode': 'history',从router.js中删除一切都有效!如果其他人有同样的问题,或者有人可以提供解释,请离开这里......
原版的
我无法将vue v2与vue-router和cordova一起使用(即建立cordova/www并使用index.html文件中的cordova工作).我曾经能够使用vue和vue-router v1.我也能用vue v2但不使用vue-router.
要清楚,应用程序npm run dev在打开构建时使用时不起作用index.html.
我有一种感觉这与路由器寻找路径/但看到的有关index.html吗？
以下是一些相关代码:
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router/router.js'
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
// replace the content of <div id="app"></div> with App
render: h => h(App)
})
app.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view></router-view>
</div>
</template>
<script>
import Hello from './components/Hello'
export default {
name: …我有以下Vuex商店(main.js):
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//init store
const store = new Vuex.Store({
state: {
globalError: '',
user: {
authenticated: false
}
},
mutations: {
setGlobalError (state, error) {
state.globalError = error
}
}
})
//init app
const app = new Vue({
router: Router,
store,
template: '<app></app>',
components: { App }
}).$mount('#app')
我还为Vue-Router(routes.js)定义了以下路由:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//define routes
const routes = [
{ path: '/home', name: 'Home', component: Home }, …据我所知vuex-router-sync仅仅是同步route与 vuex store和开发人员可以访问route如下:
store.state.route.path
store.state.route.params
不过,我也可以处理route由this.$route哪个更简洁.
我什么时候需要在商店中使用路由,以及我需要vuex-router-sync的场景是什么？
我是 vue.js 的新手，刚从 react.js 过来。我在 vue 加载器中面临的问题一开始并没有发生。但是从第二次启动服务器时应用程序崩溃。
npm run serve
> todo@0.1.0 serve /home/riyad/Desktop/todo_wedevs/todo
> vue-cli-service serve
INFO Starting development server...
ERROR Error: Cannot find module 'vue-loader-v16/package.json'
Error: Cannot find module 'vue-loader-v16/package.json'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:613:15)
at Function.Module._load (internal/modules/cjs/loader.js:539:25)
at Module.require (internal/modules/cjs/loader.js:667:17)
at require (internal/modules/cjs/helpers.js:20:18)
at api.chainWebpack.webpackConfig (/home/riyad/Desktop/todo_wedevs/todo/node_modules/@vue/cli-service/lib/config/base.js:114:23)
at webpackChainFns.forEach.fn (/home/riyad/Desktop/todo_wedevs/todo/node_modules/@vue/cli-service/lib/Service.js:236:40)
at Array.forEach (<anonymous>)
at Service.resolveChainableWebpackConfig (/home/riyad/Desktop/todo_wedevs/todo/node_modules/@vue/cli-service/lib/Service.js:236:26)
at Service.resolveWebpackConfig (/home/riyad/Desktop/todo_wedevs/todo/node_modules/@vue/cli-service/lib/Service.js:240:48)
at PluginAPI.resolveWebpackConfig (/home/riyad/Desktop/todo_wedevs/todo/node_modules/@vue/cli-service/lib/PluginAPI.js:132:25)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! todo@0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status …