How can get router params in mounted?
import VueInBrowserLoader from 'vueinbrowserloader'
export default {
name: 'Page',
components: {
'Template': VueInBrowserLoader(`../pages/${this.$route.params.event}.vue`)
}
}
Related
I'm trying to render my nested routes in Vue 3 using Vue Router 4.
routes/index.ts
import { createRouter, createWebHistory } from "vue-router";
import {NavbarLayout} from "#/layouts/NavbarLayout";
import AuthRoutes from "#/router/children/AuthRoutes";
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: "/",
component: NavbarLayout,
// children: AuthRoutes,
},
],
});
export default router;
App.ts
import { defineComponent, h } from "vue";
import { VApp, VMain } from "vuetify/components";
export const App = defineComponent({
name: "App",
setup() {
return function render() {
// "Hello" is printed to the screen
return h(VApp, h(VMain, () => ["Hello", h("router-view")]));
};
},
});
NavbarLayout.ts
import { defineComponent, h } from "vue";
import { VContainer } from "vuetify/components";
import { useRoute } from "vue-router";
export const NavbarLayout = defineComponent({
name: "NavbarLayout",
setup() {
const route = useRoute();
// The alert pop up is not shown as well
alert("it should trigger this alert");
return function render() {
// "sub router" is not printed to the screen
return h(VContainer, () => ["sub router", h("router-view", { key: route.path })]);
};
},
});
The HTML being rendered
I have tried several combinations but so far nothing seems to work. Anyone has a clue on why the nested route is not being rendered?
So I want to change a routers component based on a state in my store. This means that, depending on the state in the store, the router can display a different template page.
Router.js:
import Router from 'vue-router'
import store from './store'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Homepage',
component: () => import('#/' + store.state.theme.path + '/components/Hello')
},
{
path: '/admin',
name: 'Admin',
component: () => import('#/cms/components/Admin')
}
]
})
Store.js:
import Vuex from 'vuex'
Vue.use(Vuex);
export default new Vuex.Store({
state: {
theme: {
path:'theme-00'
}
},
getters: {
theme: state => {
return state.theme.path;
}
}
});
Any help is welcome!
Thanks,
Justin.
I use vue.js and I try to set a parameter id in axios.get request and I can't understand how exactly to do it
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Movie from './views/Movie.vue'
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
},
{
path: '/movie/:m_id',
name: 'movie',
component: Movie
}
]
})
import Navbar from '../components/Navbar'
import axios from "axios"
export default {
components:{
Navbar
},
data () {
return {
movi: null,
}
},
mounted () {
axios
.get(`https://api.themoviedb.org/3/movie/${m_id}?api_key=7bc75e1ed95b84e912176b719cdeeff9&language=en-US`)
.then(response => (this.movi= response.data))
}
}
I am trying to pass to axios this id of the page to get information about that specific movie and I got stuck.
Any help?
You can try this to use your params from the URL:
// Retrieve the `m_id` param from the `this.$route.params` object:
this.$route.params.m_id
For more info see https://router.vuejs.org/api/#route-object-properties
#How can I do the same thing but in Vuex
import Vue from 'vue'
import Vuex from 'vuex'
import Axios from 'axios';
import router from './router'
Vue.use(Vuex)
Vue.use(Axios)
Vue.use(router)
export default new Vuex.Store({
// data() {
// return {
// m_id:this.$route.params.m_id
// }
// },
// m_id : this.$route.params.m_id,
state: {
video_key: [],
},
mutations: {
updateInfo (state , video_key){
state.video_key = video_key
}
},
getters:{
m_id : this.route.params.m_id
},
actions: {
fetchData({commit,getters}){
axios.get(`https://api.themoviedb.org/3/movie/${this.m_id}/videos?api_key=7bc75e1ed95b84e912176b719cdeeff9&language=en-US`)
.then(response =>{
commit('updateInfo',response.data.results[0].key)
})
}
}
})
In case when vue-router is not used, store can be passed to child components when declaring new Vue()
But I am using both vue-router and vuex. In this case how can I make store available to components. For e.g. my store.js is typical:
import Vue from 'vue'
import Vuex from 'vuex'
import jwt_decode from 'jwt-decode'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(Vuex);
Vue.use(VueAxios, axios);
export const store = new Vuex.Store({
state: {
jwt: localStorage.getItem('t'),
endpoints: {
obtainJWT: 'http://0.0.0.0:8000/auth/obtain_token',
refreshJWT: 'http://0.0.0.0:8000/auth/refresh_token'
}
},
mutations: {
updateToken(state, newToken){
localStorage.setItem('t', newToken);
state.jwt = newToken;
},
removeToken(state){
localStorage.removeItem('t');
state.jwt = null;
}
},
actions:{
obtainToken(username, password){
//commented code
},
refreshToken(){
//commented code
},
inspectToken(){
//commented code
}
}
});
My main.js file is as below:
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
import { store } from './store'
console.log(store)
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
And router/index.js file is as below:
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '#/components/HelloWorld'
import Signup from '#/components/signup/Signup'
import store from '../store.js'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/login',
name: 'Login',
component: function (resolve) {
require(['#/components/login/Login.vue'], resolve)
}
},
{
path: '/signup',
name: 'Signup',
component: Signup
}
]
})
Now how can I pass store to my Signup component. Even though I am passing store in new Vue() it is not available in Signup component
I think the problem is that you importing store and you use the ../store.js,but when you import js file you dont have to use the .js so it has to be import store from '../store'
Also you dont have to pass the vuex store in components using vue-router.
So follow below the installation of vuex store and vue-router!
Vuex Store:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
propertiesName: 'PropValue'
},
getters: {},
mutations: {},
actions: {}
});
Vue-Router:
import Vue from 'vue'
import Router from 'vue-router'
import Page from '#/components/Page.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/Page',
name: 'Page',
component: Page,
},
//other routes
],
mode: 'history',
scrollBehavior(to, from, savedPosition) {
if(savedPosition){ //when use press back button will go at the position he was on the page
return savedPosition
}
if(to.hash){ //if has a hash positition to go
return { selector: to.hash } //go to the page in scrolled Position
}
return { x:0, y: 0 } //go to the page in scroll = 0 Position
}
})
main.js:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import { store } from '../store/store'
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App }
})
Note:Doing that,now you have access of router and store in all your components
To use the store in your components:
this.$store.state.propertiesName
To use the router in your components:
this.$router.push({name: 'Page'})
I am trying to have a template in App.vue which is main component of my app and it contains navigation bar. However I would like to hide this bar when in login page, but I cannot force App.vue to update. Any help please? :)
App.vue - here I would like to have a flag if I should show toolbar and I want to use it in template. The main problem is that currentRoute.path doesn't get updated automatically. I also tried adding router.afterEach, but didn't manage to make it work.
<script>
export default {
name: 'app',
data() {
return {
msg: 'initial',
showToolbar: router.currentRoute.path !== '/login'
}
},
}
</script>
main.js
firebase.auth().onAuthStateChanged(function (user) {
if (!app) {
/* eslint-disable no-new */
app = new Vue({
el: '#app',
router,
components: {App},
template: '<App/>',
})
}
});
router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '#/components/Home'
import Login from '#/components/Login'
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.css'
Vue.use(VueMaterial);
Vue.use(VueRouter);
let router = new VueRouter({
routes: [
{
path: '*',
redirect: '/'
},
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/',
name: 'Home',
component: Home,
meta: {
requiresAuth: true
}
}
]
});
export default router;
You're currently setting up the initial value of showToolbar, but not setting it up to watch for route changes. For that to work, move showToolbar to the computed section of you App.vue vm:
export default {
name: 'app',
data() {
return {
msg: 'initial',
}
},
computed: {
showToolbar() { return this.$router.currentRoute.path !== '/login' }
}
}
Also, since you are not explicitly importing router in App.vue, you access it in App.vue vm like this.$router, not like router.