I am trying learn about sub-routes, but the code below dont works.
Code
<!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.0/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<ul>
<li><router-link to="/firstpage">First</router-link></li>
<li><router-link to="/firstpage/segundapag">Second</router-link></li>
<li><router-link :to="{name: 'second', params:{sec: 'test'}}">Second Test</router-link></li>
</ul>
<router-view></router-view>
</div>
</body>
</html>
<template id='firstpage'>
<h1>First Page</h1>
</template>
<template id='secondpage'>
<h1>Second Page</h1>
</template>
<script type="text/javascript">
var firstpage = Vue.component('firstpage',{
template: "#firstpage"
});
var secondpage = Vue.component('secondpage',{
template: "#secondpage"
});
var router = new VueRouter({
routes:[
{path: '/firstpage', component: firstpage,
children:[
{path: 'secondpage', component: secondpage},
{path: ':sec', name:"second", component: secondpage},
]
},
]
});
var app = new Vue({
el: "#app",
mode: 'history',
router,
});
</script>
https://jsfiddle.net/tn3Lsqa5/
When clicks on "second" or "second test", nothing happens.
What´s wrong?
I follow a fews examples, but nothing works.
Console don't show any problem.
In order for your child routes to work, you will need a <router-view></router-view> in that component itself.
Using your code,
<div id="#app">
// your other code here
<router-view></router-view>
</div>
<template id="secondPage">
<h1>Second Page</h1>
<router-view></router-view>
</template>
Basically, add <router-view></router-view> inside the template of your second page.
Related
It is my first "try" with Vue + vue-select.
I have imported Vue and vue-select like it is explained in the vue-select documentation.
And my first try is this simple HTML page :
<!DOCTYPE html>
<html lang="en">
<head>
<!-- include VueJS first -->
<script src="https://unpkg.com/vue#latest"></script>
<!-- use the latest vue-select release -->
<script src="https://unpkg.com/vue-select#latest"></script>
<link
rel="stylesheet"
href="https://unpkg.com/vue-select#latest/dist/vue-select.css"
/>
</head>
<body>
<div id="app">
<h1>Vue Select</h1>
<v-select :options="options"></v-select>
</div>
<script>
Vue.component("v-select", VueSelect.VueSelect);
new Vue({
el: "#app",
data: {
options: ["foo", "bar", "baz"],
},
});
</script>
</body>
</html>
When I try this page, I have these errors in the console :
What it is wrong in this first try? When I understand this first example, it will be easier for the rest.
I just checked your code and seems this issue is due to the vue version you are using. I just used version 2.* and it is working.
Demo :
Vue.component("v-select", VueSelect.VueSelect);
new Vue({
el: "#app",
data: {
selected: 'foo',
options: ["foo", "bar", "baz"]
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-select/3.10.3/vue-select.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-select/dist/vue-select.css"/>
<div id="app">
<h1>Vue Select</h1>
<v-select :options="options" v-model="selected"></v-select>
</div>
Update : Here is the Vue 3 version of v-select
const { createApp } = Vue
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const app = createApp({
template: '#app-template',
data: () => ({
items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
}),
}).use(vuetify).mount('#app')
<script src="https://unpkg.com/vue#next/dist/vue.global.js"></script>
<script src="https://unpkg.com/#vuetify/nightly#3.0.0-next-20220604.0/dist/vuetify.js"></script>
<link rel="stylesheet" href="https://unpkg.com/#vuetify/nightly#3.0.0-next-20220604.0/dist/vuetify.css"/>
<link rel="stylesheet" href="https://unpkg.com/#mdi/font#6.x/css/materialdesignicons.min.css"/>
<script type="text/x-template" id="app-template">
<v-app>
<v-container fluid>
<v-select
:items="items"
></v-select>
</v-container>
</v-app>
</script>
<div id="app"></div>
I made a simple html file with vue-router.
I use x-template to define component template.
It works well on chrome browser, but I found that IntelliJ IDE show me a red line.
I cannot understand why IDE can't resolve this and why my code works well on the browser even though the symbol can't be resolved.
Does anyone have an idea? (The code is written below)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Router_App</title>
<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">
<nav>
<router-link to="/top">Top page</router-link>
<router-link to="/users">User page</router-link>
</nav>
<router-view></router-view>
</div>
<script type="text/x-template" id="user-list">
<div>User page</div>
</script>
<script>
let router = new VueRouter({
routes: [
{
path: '/top',
component: {
template: '<div>Top page</div>'
}
},
{
path: '/users',
component: {
template: '#user-list'
}
}
]
})
let app = new Vue({
el: '#app',
router: router
}).$mount()
</script>
</body>
</html>
Due to security reasons we cannot install nodejs and any package managers. THerefore, I am trying to build my SPA with cdn support only. However, I am struggling to get it to work as I keep getting the failed to mount template error when running my code. I am using ASP.NET core 3.1 and i am able to get to the page to load up my partial views showing the side navigation and top navigation items. The page loads up and the router seems to work in changing the url in browser but the view components for the actual page templates do not show up on the screen. For instance dashboard view should show up but does not and therefore i believe this is where the issue is but I cannot see any issues with my code.
My code is as follows:
_vueapp:
<!DOCTYPE html>
<html lang="en">
<head>
#RenderSection("Styles", required: false)
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>#ViewData["Title"] - ARMS 2.0</title>
<link rel="stylesheet" href="~/css/sidebar.css" />
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
</head>
<body>
#RenderBody()
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.12/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
#RenderSection("Scripts", required: false)
</body>
</html>
index file
#page
#model ARMS_2._0_LOCAL.Pages.vue.IndexModel
#{
Layout = "_Vueapp";
}
<div id="app" v-cloak>
<side-navigation></side-navigation>
<top-navigation></top-navigation>
<router-view></router-view>
</div>
#section Scripts
{
<partial name="components/side-navigation" />
<partial name="components/top-navigation" />
<partial name="views/dashboard" />
<partial name="views/reviews" />
<script>
//setup routing using SPA VUE interface
Vue.use(VueRouter);
const routes = [
{ path: '/', component: dashboard },
{ path: '/reviews', component: reviews }
]
const router = new VueRouter({
routes // short for `routes: routes`
})
var app = new Vue({
el: '#app',
router
}).$mount('#app')
</script>
}
side-navigation:
<style>
</style>
<template id="side-navigation">
<div>
<router-link to="/">Home</router-link>
<router-link to="/reviews">Reviews</router-link>
</div>
</template>
<script>
Vue.component('side-navigation', {
template: '#side-navigation'
})
</script>
one of my views which is dashboard:
<style>
</style>
<template id="dashboard">
<div>
<h1>dashboard</h1>
</div>
</template>
<script>
Vue.component('dashboard', {
template: '#dashboard'
})
</script>
You need to assign the components (dashboard and reviews) to a constant, otherwise the router can not recognize them.
dashboard:
<style>
</style>
<template id="dashboard">
<div>
<h1>dashboard</h1>
</div>
</template>
<script>
const dashboard = Vue.component('dashboard', {
template: '#dashboard'
})
</script>
reviews:
<style>
</style>
<template id="reviews">
<div>
<h1>reviews</h1>
</div>
</template>
<script>
const reviews = Vue.component('reviews', {
template: '#reviews'
})
</script>
I followed this tutorial https://css-tricks.com/creating-vue-js-component-instances-programmatically/
My component :
const button = Vue.component('button', {
props: {
id: String,
color: String
},
data: function() {
return {
count: 0
}
},
template:
`
<div class="button">
{{ count }}
</div>
`
});
The html :
<html>
<head>
<title>Test</title>
</head>
<body>
<div id="app">
<main id="main" ref="container">
<span #click="add">Add</span>
</main>
</div>
</body>
<script src="vue.js"></script>
<script src="app.js"></script>
</html>
All is fine but at this step I get the error "instance is not a html node" How to make vue component as a html node ?
ComponentClass = Vue.extend(button)
instance = new ComponentClass()
this.$refs.container.appendChild(instance.$el)
I am using vuerouter really for the first time and I am trying to dynamically add a url name to the hyperlink of the route. Not sure what I am doing here, {{message}} would show the name and I am trying to concatenate that to the existing url--what am I doing wrong?
secondly, because these pages are dynamically generated, would I use vuex to store the state--? so that others could see the pages--?
const Home = { template: '<div>Home</div>' }
const Foo = {
template: '<div>Foo {{n }}, {{b}}</div>',
props: ['n', 'b']
}
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/', component: Home },
{ path: '/', component: Foo, props: route => ({
})}
]
})
new Vue({
router,
el: '#app',
data: {
message:''
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body class="container">
<div id="app">
<h2>Generator</h2>
<input v-model="message" placeholder="Enter Plan Year"> {{message}} Year<br><br>
These pages are automatically generated:<br>
<strong> CardMain_{{message}}.html</strong><br>
<strong> Card_{{message}}.html</strong><br>
<strong> state_{{message}}.html</strong><br>
<strong> Log_{{message}}.html</strong><br>
<strong> Log2_{{message}}.html</strong><br><br>
<router-link to="/">/home</router-link>
<router-link to="url/+'{{message}}+'">eCard</router-link>
<router-link to="/foo/5/5">Directory</router-link>
<router-view></router-view>
<p><button class="btn btn-primary">Generate</button></p>
</div>
In order to generate the url, what you want is to use a v-bind on the route, you can do this by replacing the "to" with ":to"
Once you have that, the content of the attribute ":to" behaves as if it was javascript and you have access to all the properties of the vue component so you can just do:
<router-link to="'url/' + message">eCard</router-link>
However this route hasnt actually been registerd so it will not load anything.
Instead you may want to register a route that accepts a parameter
{ path: '/url/:id', name: 'ecard', component: eCardComponent , props: true }
In this way you can call your route as
<router-link :to="{ name: 'ecard', params:{ id: message } }">eCard</router-link>
Then you can do whatever you need in that component, like loading info from a database for that particular id.
Additionally, Vuex only works on the current tab (unless you use some code to syncronize it with the localstorage, like this example) and even then it would not persit it across machines.
const Home = { template: '<div>Home</div>' }
const eCardComponent = { template: '<div>Ecard :{{id}}</div>', props:['id'] }
const Foo = {
template: '<div>Foo {{n }}, {{b}}</div>',
props: ['n', 'b']
}
const router = new VueRouter({
routes: [
{ path: '/', component: Home },
{ path: '/', component: Foo, props: route => ({
})},
{ path: '/url/:id', name:'ecard', component: eCardComponent, props: true },
]
})
new Vue({
router,
el: '#app',
data: {
message:''
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body class="container">
<div id="app">
<h2>Generator</h2>
<input v-model="message" placeholder="Enter Plan Year"> {{message}} Year<br><br>
These pages are automatically generated:<br>
<strong> CardMain_{{message}}.html</strong><br>
<strong> Card_{{message}}.html</strong><br>
<strong> state_{{message}}.html</strong><br>
<strong> Log_{{message}}.html</strong><br>
<strong> Log2_{{message}}.html</strong><br><br>
<router-link to="/">/home</router-link>
<router-link :to="{ name: 'ecard', params:{ id: message } }">eCard</router-link>
<router-link to="/foo/5/5">Directory</router-link>
<router-view></router-view>
<p><button class="btn btn-primary">Generate</button></p>
</div>