I have a forget-pwd.vue component:
<template>
<div class="page-common">
ABC
</div>
</template>
<script>
</script>
<style scoped>
</style>
in the router.js, there is my route:
export const paths = {
home: '/',
dataCenter: '/data-center',
forgetPassword: '/forget-password',
}
export const app_routes = [
......
{
path: paths.forgetPassword,
name: '忘记密码',
meta: {
title: ''
},
component: (resolve) => require(['./views/忘记密码/forget-pwd.vue'], resolve)
},
];
export const routes = [
...app_routes,
];
this is my index.vue:
<template>
<div class="index">
<i-header ></i-header>
<router-view></router-view>
<i-footer></i-footer>
</div>
</template>
<script>
import Home from './首页/home.vue'
import Header from '../components/header/header.vue'
import Footer from '../components/footer/footer.vue'
export default {
data() {
return {
}
},
methods: {
},
components: {
'home': Home,
'i-header': Header,
'i-footer': Footer,
}
};
</script>
<style scoped>
.index {
}
</style>
in a modal of my header.vue I link to the forget-pwd.vue:
<router-link class="forget-pwd" type="text" to="forgetPwdPath" #click.native="closeModal" >忘记密码?</router-link>
the route is skipped, but the forget-pwd.vue template do not shows up:
You forgot to bind the to in your router link. So bind it:
<router-link class="forget-pwd" type="text" :to="forgetPwdPath" #click.native="closeModal" >忘记密码?</router-link>
Or
<router-link class="forget-pwd" type="text" v-bind:to="forgetPwdPath" #click.native="closeModal" >忘记密码?</router-link>
Related
I have 3 components: App.vue (Entry point), slotWrapper.vue (Wrapping component), About.vue (Page Content).
Inside the 'App.vue' i have the router-view setup which is wrapped with 'slotWrapper.vue' component. The 'slotWrapper' component has a <slot> where the current route will be rendered.
My question: Inside the About.vue page (which will be rendered instead of the <slot>, of the slotWrapper.vue component) I have a computed value which I somehow need to pass back to 'slotWrapper.vue' component to use. How would I achieve such a thing.
I looked into ScopedSlots but I can't figure our how to use it where the content rendered is provided by a router.
Link to: CodeSanbox
App.Vue
<template>
<div id="app">
<slotWrapper>
<router-view />
</slotWrapper>
</div>
</template>
<script>
import slotWrapper from "./components/SlotWrapper.vue";
export default {
name: "app",
components: {
slotWrapper,
},
};
</script>
SlotWrapper.vue
<template>
<div class="wrpperClass">
<slot />
</div>
</template>
<script>
export default {
name: "SlotWrapper",
};
</script>
<style scoped>
.wrpperClass {
width: 50%;
height: 50%;
color: black;
background-color: lightblue;
}
</style>
About.vue
<template>
<div id="app">
<slotWrapper>
<router-view />
</slotWrapper>
</div>
</template>
<script>
import slotWrapper from "./components/SlotWrapper.vue";
export default {
name: "app",
components: {
slotWrapper,
},
};
</script>
<style>
#app {
margin: 60px;
}
.link {
display: inline-block;
padding: 10px;
}
.router-link-active {
color: green;
}
</style>
Router: index.js
import Vue from "vue";
import Router from "vue-router";
import About from "../components/About";
Vue.use(Router);
export default new Router({
mode: "history",
routes: [
{ path: "/", redirect: "about" },
{
path: "/about",
component: About
// props: (route) => ({ name: route.query.name })
}
]
});
For those who might face this issue. I figured that you can pass props to <router-view> and listen to emits. Since you can listen to emits I simply emit from the about.vue page and listen on the app.vue, and later using props I pass the variable down to slotWrapper.vue.
App.vue
<template>
<div id="app">
<slotWrapper :propToPass="propToPass">
<router-view #comp-data="receiveFunction" />
</slotWrapper>
</div>
</template>
<script>
import slotWrapper from "./components/SlotWrapper.vue";
export default {
name: "app",
data() {
return { propToPass: null };
},
components: {
slotWrapper,
},
methods: {
receiveFunction(data) {
this.propToPass = data;
console.log("From emit: ", data);
},
},
};
</script>
About.vue
<template>
<div>
<h3>About Page</h3>
<p>
I need this data:
<span style="color: green">'ComputedData'</span> available inside
'SlotWrapper'
</p>
<p>{{ ComputedData }}</p>
</div>
</template>
<script>
export default {
name: "About",
data() {
return {
someVariable: "'someVariable'",
};
},
mounted() {
setTimeout(this.sendData, 2000);
},
computed: {
ComputedData() {
return (
this.someVariable + " How do I become accessible inside slotWrapper?"
);
},
},
methods: {
sendData() {
this.$emit("comp-data", this.ComputedData);
},
},
};
</script>
I'm tring to redirect from my Login Template
<template>
<formulario-login/>
</template>
<script>
import formularioLogin from "#/components/formularioLogin";
export default {
name: "index",
components: {
formularioLogin
},
methods: {
}
}
</script>
<style scoped>
</style>
<template>
<div class="center">
Login
<input type="text" v-model="usuario.login">
<br/>
Senha
<input type="password" v-model="usuario.password">
<br/>
<button #click="logar"> Login</button>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "barraInicial",
data: () => {
return {
usuario: {
login: undefined,
password: undefined
}
}
},
methods: {
async logar() {
let formData = new FormData();
formData.append("user", this.usuario)
await axios.post('http://localhost:8080/login', this.usuario)
.then(res => {
if(res.data === true){
this.$router.push('/App')
}
})
.catch(res => console.log(res))
}
}
}
</script>
<style scoped>
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
</style>
To my App Template
<template>
<div class="container">
<div class="large-12 medium-12 small-12 cell">
<label>Select file
<input type="text" v-model="nome"/>
<input type="file" id="file" v-on:change="handleFileUpload"/>
</label>
<button v-on:click="submitFile">Send</button>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'App',
components: {
},
data: () => ({
file: '',
nome: ''
}),
methods: {
handleFileUpload( event ){
this.file = event.target.files[0];
},
async submitFile(){
let formData = new FormData();
formData.append("image", this.file, this.file.name);
formData.append("nome", this.nome)
await axios.post( 'http://localhost:8080/image.do',
formData,
)
},
}
}
</script>
<style>
*{
}
</style>
I've added a Vue-Router into my project and my main.js
import { h } from 'vue'
import App from './App.vue'
import Index from './Index.vue'
import * as VueRouter from 'vue-router'
import * as Vue from 'vue'
const routes = [
{path: '/', component: Index, name: 'index'},
{path: '/App', component: App, name: 'program'},
]
const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes,
})
const app = Vue.createApp({
render: ()=>h(Index)
})
app.use(router)
app.mount('#app')
I've created a Vue 3 project, and i'm trying to redirect from my Template Login to my App Template, i added Vue-Router into my project and created path's to my templates, but when my front-end receive a boolean true from my back-end, they step into if condition, the URL change, but template don't, the console don't show nothing too
Since you not including Index.vue file, I think you forgot the <router-view/>
Reference
// Index.vue
<template>
<router-view />
</template>
<script>
export default {
name: "Index",
}
</script>
I use component locally method for use ckeditor and add Base64UploadAdapter plugin in config file.
but i have error ckeditor-duplicated-modules
how can i add truly Base64UploadAdapter plugin to ckeditor in nuxt component for Reuse this component.
//ckEditorNuxt
<template>
<ckeditor
:editor="editor"
:value="value"
:config="config"
:tagName="tagName"
:disabled="disabled"
#input="event => $emit('input', event)"
/>
</template>
<script>
let Classiceditor
let CKEditor
if (process.client) {
Classiceditor = require('#ckeditor/ckeditor5-build-classic')
CKEditor = require('#ckeditor/ckeditor5-vue2')
} else {
CKEditor = {component: {template: '<div></div>'}}
}
export default {
name: "ckEditorNuxt",
components: {
ckeditor: CKEditor.component
},
...and more
and use in this code.
<template>
<v-card height="100%">
<h4 class="pa-2">{{ title }}</h4>
<client-only placeholder="loading...">
<ckEditorNuxt v-model="contentHolder" :config="editorConfig"/>
</client-only>
</v-card>
</template>
<script>
import ckEditorNuxt from "#/components/ckEditor/ckEditorNuxt";
import {Base64UploadAdapter} from "#ckeditor/ckeditor5-upload";
export default {
name: "PersianCKEditor",
components: {
ckEditorNuxt,
},
props: {
title: String
},
data() {
return {
editorConfig: {
plugins: [
Base64UploadAdapter
],
placeholder: this.title,
removePlugins: ['Title'],
and more...
The connection in between components gets disrupted. Which shouldnt happen since I am using bootstrap-vue inbuilt router link (using to=" " instead of href="").
The app works perfectly fine when running without dist.
App.vue
<template>
<div class="container">
<app-header></app-header>
<div class="row">
<div class="col-xs-12">
<transition name="slide" mode="out-in">
<router-view></router-view>
</transition>
</div>
</div>
</div>
</template>
<script>
import Header from "./components/Header.vue";
export default {
components: {
appHeader: Header
},
created() {
this.$store.dispatch("initStocks");
}
};
</script>
Header.vue
<template>
<div>
<b-navbar toggleable="lg" type="dark" variant="info">
<b-navbar-brand to="/">Stock Broker</b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-item to="/portfolio">Portfolio</b-nav-item>
<b-nav-item to="/stocks">Stocks</b-nav-item>
<b-nav-item #click="endDay">End Day</b-nav-item>
<b-navbar-nav right>
<b-nav-item right>Funds: {{ funds }}</b-nav-item>
</b-navbar-nav>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</div>
</template>
<script>
import { mapActions } from "vuex";
export default {
data() {
return {
isDropdownOpen: false
};
},
computed: {
funds() {
return this.$store.getters.funds;
}
},
methods: {
...mapActions({
randomizeStocks: "randomizeStocks",
fetchData: "loadData"
}),
endDay() {
this.randomizeStocks();
},
saveData() {
const data = {
funds: this.$store.getters.funds,
stockPortfolio: this.$store.getters.stockPortfolio,
stocks: this.$store.getters.stocks
};
this.$http.put("data.json", data);
},
loadData() {
this.fetchData();
}
}
};
</script>
vue.config.js
module.exports = {
pluginOptions: {
prerenderSpa: {
registry: undefined,
renderRoutes: ["/", "/portfolio", "/stocks"],
useRenderEvent: true,
headless: true,
onlyProduction: true
}
}
};
router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/stocks',
name: 'Stocks',
component: () => import(/ '../views/Stocks.vue')
},
{
path: '/portfolio',
name: 'Portfolio',
component: () => import('../views/Portfolio.vue')
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
I figured it a minute after making this post haha.
The issue was that in App.vue I had my main div with a class of "container" instead of id of "app".
Corrected below:
<template>
<div id="app"> //correction here
<app-header></app-header>
<div class="row">
<div class="col-xs-12">
<transition name="slide" mode="out-in">
<router-view></router-view>
</transition>
</div>
</div>
</div>
</template>
Here is the codes.
html
<div id="app">
<nav>
<ul>
<router-link to="/user">User List</router-link>
</ul>
</nav>
<router-view></router-view>
</div>
Routes definition
const routes = [
{
path: '/user', component: User,
children: [
{path: '', name:'user-list', component: UserList},
{path: ':id', name: 'user-detail', component: UserDetail}
]
}];
let router = new VueRouter({routes});
export default router;
User
<template>
<div>
<h2>User Center</h2>
<router-view></router-view>
</div>
</template>
<script>
export default {
data () {
return {
}
},
methods:{
}
}
</script>
User list
<template>
<div>
<!--<ul>-->
<!--<li v-for="u of userList">-->
<!--<router-link :to="{ name:'user-detail', params: { id: '4343' }}">{{u.name}}</router-link>-->
<!--</li>-->
<!--</ul>-->
<router-link :to="{ name:'user-detail', params: { id: '4343' }}">3434</router-link>
<!--<a #click="query">++++</a>-->
</div>
</template>
<script>
import {mapActions} from 'vuex'
import {USER_QUERY} from '../store/user.type'
export default {
data () {
return {
userList: []
}
},
methods: {
query: function () {
this.$store.dispatch(USER_QUERY, [{name:'111'},{name:'1222'}])
}
}
}
</script>
User detail
<template>
<div>
<h2>{{ $route.params.id }}</h2>
</div>
</template>
<script>
export default {
data () {
return {
}
},
methods: {
test: ()=> {
}
}
}
</script>
I want click the link in the UserList can navitage to the UserDetail,but it is not working,someone help to check it?
Like this
App
--User
----UserList
http://localhost:8080/#/user
change to
App
--User
----UserDetail
http://localhost:8080/#/user/5454
you have to give path in to in outer-link as /user/:id in your HTML code, like following:
<router-link :to="'/users/' + id">3434</router-link>
See working fiddle here.
I made a stupid mistake like this.
import User from './component/user-list.vue';